Adding new fields to cases

Every app is unique in its own way. Instagram users have to upload a picture and then people comment on it, AirBnB users upload pictures and descriptions of homes and other users comment on them, etc.

For now, our app has Cases that belong to Users. Cases have an Image Link or, as of recent, an Image. Your app needs something custom. In our sample Case management system, a Case is determined by a Title, a Description and an Image.

Thus, we will have to:

• Add a Title field instead of the now unused Image Link
• Add a Description (or Body) field

Migration

As you have seen last time, whenever we need a change in the structure, we need to create a migration. By analyzing the transformation above, we can see that we need to add a column and rename a column.

Open the Terminal and type:

$ rails generate migration edit_case_columns

Now open the newly created file using Sublime Text. It is located under db/migrate and should be called 123123123_edit_case_columns.rb.

Edit it to add a new column called body of type text (a bit bigger than the string type we used last time) and rename the column link into title:

class EditCaseColumns < ActiveRecord::Migration
  def change
    add_column :cases, :body, :text
    rename_column :cases, :image_link, :title
  end
end

Go back to the console and run the newly created migration:

$ rake db:migrate

Our new settings have been applied. Let's edit our forms and UI to include the new changes.

New and Edit forms

Since we added new fields, have to add a way for the user to set these new fields. Open the file app/views/cases/new.html.erb and add the new fields so that the file content becomes:

<h1> New Case</h1>
<%= form_for @case do |form| %>
  Case title: <%= form.text_field :title%>
  <%= form.attachinary_file_field :case_image %>
  Case description: <%= form.text_area :body %>
  <%= form.submit %>
<% end %>

And here's how it looks like:

Simply put, this is incredibly ugly. So ugly it does not belong on 2016's Internet. This is why we will dedicate one of the future sections to styling forms.

We leave the app/views/cases/edit.html.erb as en exercise.

Displaying posts

If you try to create a new post, it will be created properly, but when you try to look at it, you can only see the image!

Let's fix that by adding the new fields to our app/views/cases/index.html.erb. We already use Bootstrap's panel with a header and footer, so let's customize that.

In

<div class="panel-heading">
  <h3 class="panel-title"><%= "Case id: " +  c.id.to_s %></h3>
</div>

Let's display the title instead of the case id:

<div class="panel-heading">
  <h3 class="panel-title"><%= c.title %></h3>
</div>

Great, let's also display our body field. Just after:

<%= cl_image_tag(c.case_image.path, width: 500) %>

We can add a paragraph with the body:

<p>  
  <%= c.body %>
</p>

Refreshing the page and we see that our page has been updated!

Let's add one more cosmetic change. Bootstrap supplies a couple of classes that can make images look better. Let's try to put them onto our tag and change it from:

<%= cl_image_tag(c.case_image.path, width: 500) %>

to

<%= cl_image_tag(c.case_image.path, width: 500, class: 'img-responsive img-thumbnail') %>

This img-thumbnail class will wrap the image in a pretty border and the img-responsive class will protect the image from overflowing the container on small screens.

That's it! We have new fields and we managed to properly display them.