1.6: Mejoras al formulario de boards - wyeworks/rails-workshop-2017-dia-1 GitHub Wiki

Mejoras al formulario de board

En esta sección vamos a mejorar cómo se ve y los controles que forman parte de nuestro formulario de boards.

1. Usar tags HTML select y helpers

Vamos a cambiar el input HTML que generó el scaffold para visibility porque queremos usar un dropdown en lugar de campo de texto.

Primero creamos un helper para mostrar las opciones que tendrá el dropdown:

# app/helpers/boards_helper.rb


module BoardsHelper
  def visibility_options
    [
      ['Public', 'public'],
      ['Private', 'private']
    ]
  end
end

Y luego reemplazamos el campo de texto por un dropdown:

<!-- app/views/boards/_form.html.erb -->

<!-- Localizar el div que tiene el input de visibility y reemplazarlo
por este código HTML/Ruby -->

<div class="field">
  <%= form.label :visibility %>
  <%= form.select :visibility, visibility_options, {}, id: :board_visibility %>
</div>

2. Estilos para el formulario

Vamos a reemplazar parte del HTML que nos generó el scaffold, con código nuestro basado en los estilos que nos da la librería bootstrap.

  • Borramos todo lo que hay en la vista app/views/boards/new.html.erb y ponemos ahí este código:
<div class="row">
  <div class="col-xs-4 col-xs-offset-4">
    <div class="page-header">
      <h1>New Board</h1>
    </div>
    <%= render 'form', board: @board %>
  </div>
</div>
  • Borramos todo lo que hay en la vista app/views/boards/edit.html.erb y ponemos ahí este código:
<div class="row">
  <div class="col-xs-4 col-xs-offset-4">
    <div class="page-header">
      <h1>Edit Board</h1>
    </div>
    <%= render 'form', board: @board %>
  </div>
</div>
  • Borramos todo lo que hay en la vista app/views/boards/_form.html.erb y ponemos ahí este código
<%= form_with(model: board, local: true) do |form| %>
  <% if board.errors.any? %>
    <div class="alert alert-danger">
      <strong>Error:</strong> <%= board.errors.full_messages.to_sentence %>
    </div>
  <% end %>

  <div class="form-group">
    <%= form.label :name %>
    <%= form.text_field :name, id: :board_name, class: "form-control" %>
  </div>

  <div class="form-group">
    <%= form.label :visibility %>
    <%= form.select :visibility, visibility_options, {}, id: :board_visibility, class: "form-control" %>
  </div>

  <div class="checkbox">
    <%= form.label :favorite do %>
      <%= form.check_box :favorite, id: :board_favorite %> Favorite
    <% end %>
  </div>

  <%= form.submit class: "btn btn-default" %>
  <%= link_to 'Back', boards_path %>
<% end %>

Probamos los cambios en el browser.

Commit en Git

git add -A
git commit -m "Mejoras al formulario de boards"

Siguiente: 1.7. Autenticación

⚠️ **GitHub.com Fallback** ⚠️