DEV Community: Douglas Berkley

How to use nested attributes in Ruby on Rails (create multiple objects at once)

Douglas Berkley — Wed, 23 Jul 2025 06:22:14 +0000

Introduction

Quite often in my applications, I want to create multiples types of objects in one form submission. For example, when one instance is created, you want the associations to be created a the same time. Everything I do here is based on the official documentation. I'm going to move forward using this database schema:

As you can see here, I have one group (with a name) which has_many :people. One person that belongs_to :group. If I follow regular Rails CRUD actions, I would have to create a group then follow up with creating the people in this group separately. It might look something like this:

So how can I create both a group but also people at the same time?

Form Setup

I would love my form to look something more like this:

This allows me to create a group with the name but then also add people, which has first_name and last_name, into that group.

I'm using the gem Simple Form for my forms. So the original form would look like this:

<%= simple_form_for @group do |f| %>
  <%= f.input :name, placeholder: 'The Berkleys' %>
  <%= f.submit 'Submit', class: 'btn btn-primary mt-3' %>
<% end %>

This needs two things in order to work:

Create the @group instance variable in your controller#action
Add the route to create a group in your routes.rb

But this obviously only allows me to create a group. We want to add the people into this form. For this, we're going to use simple_fields_for to build a form within a form.

Nested Form

To add a person in our app, we would normally have a form like this:

<%= simple_form_for @person do |f| %>
  <%= f.input :first_name, placeholder: 'John' %>
  <%= f.input :last_name, placeholder: 'Doe' %>
  <%= f.submit 'Submit', class: 'btn btn-primary mt-3' %>
<% end %>

But the idea here is to move the person form into our group form. This is where our simple_fields_for comes into play. Our nested form will looks like this:

<%= simple_form_for @group do |f| %>
  <!-- Anything a group would have -->
  <%= f.input :name, placeholder: 'The Berkleys' %>
  <!-- The nested form -->
  <%= f.simple_fields_for :people do |person_form| %>
    <div class="d-flex align-items-center w-100">
      <!-- Anything a person would have -->
      <%= person_form.input :first_name, placeholder: 'John' %>
      <%= person_form.input :last_name, placeholder: 'John' %>
    </div>
  <% end %>
  <%= f.submit 'Submit', class: 'btn btn-primary mt-3' %>
<% end %>

This doesn't just work by default though. We have three more steps to get this setup work:

Tell our group model that we'll be creating people along with the group
Define objects in the controller so our form helper can build the form.
Update the strong parameters since we're sending more information from the form.

Update the Model

Let's go into our group.rb to tell our model that we'll also be creating people at the same time. accepts_nested_attributes_for comes from the docs.

# group.rb (model)
# ...
has_many :people
accepts_nested_attributes_for :people, allow_destroy: true
# ...

Update the Controller

So normally in our new action, we create an empty instance variable to give to our form helper.

def new
  @group = Group.new
end

But because we're also creating people at the same time, we need to set this up in our controller too.

def new
  @group = Group.new
  @group.people.build # needed for nested form
end

What is the `@group.people.build` doing?

It is used to initialize a new person object associated with the @group instance. The build method in Active Record (when used on an association like @group.people) creates a new associated person object in memory without saving it to the database.

Why is the `@group.people.build` needed?

Our nested form expects at least one person object to exist so that it can generate the input fields for first_name and last_name.

Update the Strong Params

Now that we're creating two things at once, it's still only getting sent to the original form location. In our example, it's getting sent to the groups#create action. We actually don't need to change how a group gets created. It could potentially looks like this (and notice that there is nothing about a person in here):

def create
  @group = Group.new(group_params)
  @group.user = current_user
  if @group.save
    redirect_to group_path(@group)
  else
    redirect_to groups_path
  end
end

See? Nothing about people. But we will have to change one thing, and that's our strong parameters. Basically we told our group model that we'd also be passing people into it. So let's take a look a the parameters that got sent from the form:

{
  "group"=> {
    "name"=>"The Berkleys", 
    "people_attributes"=> {
      "0"=> { "first_name"=>"Douglas", "last_name"=>"Berkley" }
    }
  }
}

The params looks a bit strange, right? It's normal to see our "group"=> { "name"=>"The Berkleys" }" but the people_attributes is new from our from our nested form and accepts_nested_attributes_for. There's a 0 in the people_attributes from the form because in theory, we can now create as many people as we want for the one group inside the form.

So now let's update our strong parameters to accept people_attributes.

def group_params
  params.require(:group).permit(:name, people_attributes: [:first_name, :last_name :_destroy])
end

Now our form should be good to go!

Going further...

What if I want to create more than one person at a time? As of now, our nested form just has one option for our person (just one first_name and last_name input). I could hard-code it by just copying and pasting our nested part in our form:

<%= simple_form_for @group do |f| %>
  <!-- Anything a group would have -->
  <%= f.input :name, placeholder: 'The Berkleys' %>
  <!-- FIRST PERSON -->
  <%= f.simple_fields_for :people do |person_form| %>
    <div class="d-flex align-items-center w-100">
      <!-- Anything a person would have -->
      <%= person_form.input :first_name, placeholder: 'John' %>
      <%= person_form.input :last_name, placeholder: 'John' %>
    </div>
  <% end %>
  <!-- SECOND PERSON -->
  <%= f.simple_fields_for :people do |person_form| %>
    <div class="d-flex align-items-center w-100">
      <!-- Anything a person would have -->
      <%= person_form.input :first_name, placeholder: 'John' %>
      <%= person_form.input :last_name, placeholder: 'John' %>
    </div>
  <% end %>
  <%= f.submit 'Submit', class: 'btn btn-primary mt-3' %>
<% end %>

Import the component

Check if you're using importmap or yarn.

importmap pin @stimulus-components/rails-nested-form

How to use nested attributes in Ruby on Rails (create associated objects in one form)

Douglas Berkley — Tue, 25 Feb 2025 07:21:28 +0000

Introduction

Quite often in my applications, I want to create multiple types of objects in one form submission. For example, when one instance is created, you want the associations to be created at the same time. Everything I do here is based on the official documentation. I'm going to move forward using this database schema:

So how can I create both a group but also people at the same time?

Form Setup

I would love my form to look more like this:

This allows me to create a group with the name but then also add people, which has first_name and last_name, into that group.

I'm using the gem Simple Form for my forms. So the original form would look like this:

<%= simple_form_for @group do |f| %>
  <%= f.input :name, placeholder: 'The Berkleys' %>
  <%= f.submit 'Submit', class: 'btn btn-primary mt-3' %>
<% end %>

This needs two things in order to work:

Create the @group instance variable in your controller#action
Add the route to create a group in your routes.rb

But this obviously only allows me to create a group. We want to add the people into this form. For this, we're going to use simple_fields_for to build a form within a form.

Nested Form

To add a person in our app, we would normally have a form like this:

<%= simple_form_for @person do |f| %>
  <%= f.input :first_name, placeholder: 'John' %>
  <%= f.input :last_name, placeholder: 'Doe' %>
  <%= f.submit 'Submit', class: 'btn btn-primary mt-3' %>
<% end %>

But the idea here is to move the person form into our group form. This is where our simple_fields_for comes into play. Our nested form will look like this:

<%= simple_form_for @group do |f| %>
  <!-- Anything a group would have -->
  <%= f.input :name, placeholder: 'The Berkleys' %>
  <!-- The nested form -->
  <%= f.simple_fields_for :people do |person_form| %>
    <div class="d-flex align-items-center w-100">
      <!-- Anything a person would have -->
      <%= person_form.input :first_name, placeholder: 'John' %>
      <%= person_form.input :last_name, placeholder: 'John' %>
    </div>
  <% end %>
  <%= f.submit 'Submit', class: 'btn btn-primary mt-3' %>
<% end %>

This doesn't just work by default, though. We have three more steps to get this setup working:

Tell our group model that we'll be creating people along with the group
Define an object in the controller so our form helper can build it.
Update the strong parameters since we're sending more information from the form.

Update the Model

Let's go into our group.rb to tell our model that we'll also be creating people at the same time. accepts_nested_attributes_for comes from the docs.

# group.rb (model)
# ...
has_many :people
accepts_nested_attributes_for :people, allow_destroy: true
# ...

Update the Controller

So normally in our new action, we create an empty instance variable to give to our form helper.

def new
  @group = Group.new
end

But because we're also creating people at the same time, we need to set this up in our controller too.

def new
  @group = Group.new
  @group.people.build # needed for nested form
end

What is the `@group.people.build` doing?

Why is the `@group.people.build` needed?

Our nested form expects at least one person object to exist, so that it can generate the input fields for first_name and last_name.

Update the Strong Params

Now that we're creating two things at once, it's still only getting sent to the original form location. In our example, it's getting sent to the groups#create action. We actually don't need to change how a group gets created. It could potentially look like this (and notice that there is nothing about a person in here):

def create
  @group = Group.new(group_params)
  @group.user = current_user
  if @group.save
    redirect_to group_path(@group)
  else
    redirect_to groups_path
  end
end

{
  "group"=> {
    "name"=>"The Berkleys", 
    "people_attributes"=> {
      "0"=> { "first_name"=>"Douglas", "last_name"=>"Berkley" }
    }
  }
}

The params looks a bit strange, right? It's normal to see our "group"=> { "name"=>"The Berkleys" }" but the people_attributes is new from our nested form and accepts_nested_attributes_for. There's a 0 in the people_attributes from the form because in theory, we can now create as many people as we want for the one group inside the form.

So now let's update our strong parameters to accept :people_attributes.

def group_params
  params.require(:group).permit(:name, people_attributes: [:first_name, :last_name, :_destroy])
end

Now our form should be good to go!

Going further...

<%= simple_form_for @group do |f| %>
  <!-- Anything a group would have -->
  <%= f.input :name, placeholder: 'The Berkleys' %>
  <!-- FIRST PERSON -->
  <%= f.simple_fields_for :people do |person_form| %>
    <div class="d-flex align-items-center w-100">
      <!-- Anything a person would have -->
      <%= person_form.input :first_name, placeholder: 'John' %>
      <%= person_form.input :last_name, placeholder: 'John' %>
    </div>
  <% end %>
  <!-- SECOND PERSON -->
  <%= f.simple_fields_for :people do |person_form| %>
    <div class="d-flex align-items-center w-100">
      <!-- Anything a person would have -->
      <%= person_form.input :first_name, placeholder: 'John' %>
      <%= person_form.input :last_name, placeholder: 'John' %>
    </div>
  <% end %>
  <%= f.submit 'Submit', class: 'btn btn-primary mt-3' %>
<% end %>

This is fine if we know exactly how many people I want to add when I create a group. But it would be much better if it was dynamic. For example, I can add 1 person or 10 people.
To make it dynamic, it can be a bit tricky. So I like to use the Rails Nested Form - Stimulus component which simplifies the process. I'll let you follow the other tutorial to solve that issue, but in the end, we could have a nice dynamic form that looks like this:

Update total booking price on a form (like Airbnb) without refreshing using Stimulus

Douglas Berkley — Thu, 05 Oct 2023 07:45:13 +0000

At Le Wagon, our students spend 1 week building a Ruby on Rails(v7) Airbnb clone. There are times where we want to update booking prices in real-time for a user based on the dates they choose.

Airbnb Example

Let's base our idea on the booking form from Airbnb.

Airbnb is telling us how much it costs to book a specific place per night, but it's also doing the math for the entire 3-day stay.
So if I want to add two extra days to my trip, I'd like to have the form update the final price as soon as I change the dates.

Setup

Let's walk through how we can do this in Ruby on Rails(v7) and Stimulus.

In our example here, we're booking a home. So our booking has a start_date, end_date, and the home has a price (per night).

When we're building our form (using Simple Form and Bootstrap 5.2), we'll try to replicate the same idea as the Airbnb form.

Then when our user chooses the dates, we want to calculate and display the total amount

Okay so let's get this feature installed and plugged into our app. We'll do this in two steps: the Stimulus controller and HTML(erb) form.

Stimulus controller

Let's generate our Stimulus controller first in the Terminal

rails g stimulus booking_price

Then we can add in the logic to calculate the days and prices

// booking_price_controller.js

import { Controller } from "@hotwired/stimulus";

// Connects to data-controller="booking-price"
export default class extends Controller {
  static targets = ["start_date", "end_date", "price", "info"];
  static values = { price: Number };

  update() {
    const pricePerDay = parseInt(this.priceValue, 10);
    // make sure the user has chosen a start date and end date
    if (
      this.start_dateTarget.value !== "" &&
      this.end_dateTarget.value !== ""
    ) {
      // calculating the time from the values in the HTML
      const diffInMs =
        new Date(this.end_dateTarget.value) -
        new Date(this.start_dateTarget.value);
      const diffInDays = diffInMs / (1000 * 60 * 60 * 24);
      if (diffInDays > 0) {
        // displays the total price per nigh
        this.infoTarget.innerText = `¥${pricePerDay} x ${diffInDays} nights`;
        this.priceTarget.innerHTML = `<span>¥${(
          diffInDays * pricePerDay
        ).toLocaleString()}</span> <small class='fw-light'>total</small> `;
      } else if (diffInDays === 0) {
        // displays 1-night minimum if end date is same as start date
        this.infoTarget.innerText = "";
        this.priceTarget.innerHTML =
          "<span class='text-danger fw-light'>1-night mininum</span>";
      } else {
        // displays invalid if the end date is before the start or not overnight
        this.infoTarget.innerText = "";
        this.priceTarget.innerHTML =
          "<span class='text-danger fw-light'>Invalid dates</span>";
      }
    }
  }
}

View

Then let's head to our view, where we have a number of things to add:

We are wrapping the entire form in our data-controller="booking-price".
We're adding our price as a data-booking-price-price-value="<%= @home.price %>" so that we have access to it in the JS Controller.
We're adding data-actions onto our form inputs so that when the user changes the dates, it'll update our price.
We're adding a target at the end where we'd like to display the total price once it's been calculated.
Lots of style with Bootstrap.

<div data-controller="booking-price" data-booking-price-price-value="<%= @home.price %>" class="mt-5 border p-3 rounded">
  <!-- Displays price/night on top of form -->
  <p class='fw-bold fs-3'>¥<%= @home.price %> <small class='fw-light'>night</small></p>
  <%= simple_form_for [@home, @booking] do |f| %>
    <div class="d-flex">
      <!-- On change of dates, it triggers our update inside of our JS controller -->
      <%= f.input :start_date, html5: true, input_html: { data: { booking_price_target: 'start_date', action: 'change->booking-price#update' }, min: Date.today } %>
      <%= f.input :end_date, html5: true, input_html: { data: { booking_price_target: 'end_date', action: 'change->booking-price#update' }, min: Date.today } %>
    </div>
    <%= f.submit 'Book', class: 'btn btn-primary w-100' %>
    <!-- Hidden when no dates chosen, total amount displayed here when changed -->
    <p class='mt-3 d-flex align-items-center justify-content-between'>
      <span data-booking-price-target='info'></span>
      <span class='fw-bold' data-booking-price-target='price'></span>
    </p>
  <% end %>
</div>

Voilà! And now you should be be able to give your user a better date picking experience.

Active Record Scopes Tutorial - Rails - Booking example

Douglas Berkley — Wed, 04 Oct 2023 06:31:07 +0000

At Le Wagon, our students spend 1 week building a Ruby on Rails Airbnb clone. We normally end up with a schema relatively close to this:

When we get to the bookings page, it can be tricky how to retrieve all of the relevant bookings for a particular user. An empty bookings page example (with tabs)

If we use Booking.all, this will give us all of the bookings for every user in the entire application which is obviously not what we want. The simple version of this would just to get all of the bookings for the person logged in (if you're using Devise) current_user.bookings

However, you may have noticed that on our booking, we have a start_date, end_date, and status. So our bookings become a little bit more complicated. Do we want all of our pending bookings? Bookings that are in the future? Bookings that are currently happening? Well when we use current_user.bookings, it's giving us everything.

To be able to sort through all the different types of bookings that we have, we can use Active Record scopes. If you haven't dealt with scopes before, the syntax might feel a bit strange. Here is one example:

# booking.rb (model)
scope :past, -> { where('end_date < ?', Date.today) }

This gives us access to method .past now. So in our controller, we could use Booking.past if we want past bookings from all users. But in this particular example, now we can access all the past bookings for a particular user: current_user.bookings.past

So given this one example of a scope, we could now go crazy with lot of different types of bookings (depending on how we're using them in the view). Our model might end up looks like this:

class Booking < ApplicationRecord
  belongs_to :user
  belongs_to :offer
  validates :start_date, presence: true
  validates :end_date, presence: true
  enum status: { pending: 0, accepted: 1, rejected: 2 }

  scope :past, -> { where('end_date < ?', Date.today) }
  scope :future, -> { where('start_date > ?', Date.today) }
  scope :active, -> { where('start_date < ? AND end_date > ?', Date.today, Date.today) }
  scope :today, -> { accepted.where(date: Date.today) }
  scope :upcoming, -> { accepted.future }
  scope :need_response, -> { pending.future }
  scope :expired, -> { pending.past }
  scope :completed, -> { accepted.past }
  scope :not_rejected, -> { where.not(status: :rejected) }

  def number_of_days
    (start_date - end_date).to_i 
  end

  def price
    offer.price * number_of_days
  end
end

Now thinking about our how to use this, we can load all of the user's bookings in the bookings controller.

def index
  @bookings = current_user.bookings
end

Then in our view we can display whatever type of bookings that we decided, using our newly made scopes!

<%= render 'cards', bookings: @bookings.today %>
<%= render 'cards', bookings: @bookings.future %>
<%= render 'cards', bookings: @bookings.active %>
<%= render 'cards', bookings: @bookings.need_response %>
<%= render 'cards', bookings: @bookings.past %>
<!-- etc. -->

Building Functional Tabs with Style

Douglas Berkley — Wed, 01 Feb 2023 05:42:25 +0000

How to combine Bootstrap 5.2 function with style

There's no reason to reinvent the wheel here. The tabs that Bootstrap provide for us give us all of the functionality that we need. You can give them a nice click-around here or just take a look at the screenshot below 👇

The problem is that they don't look very nice. Thankfully the kind developers at Le Wagon have provided us with some tab style in their UI Kit. But, they are not functional just yet.

So with the combination of Bootstrap functionality and Le Wagon style, we've come up with this:

You can have a look at the code and click around on this Codepen

SCSS

Remember to import both CSS and JS from Bootstrap as well.

.tabs-underlined {
  display: flex;
  align-items: center;
}
.tabs-underlined {
  .tab-underlined {
    color: black;
    padding: 8px;
    margin: 8px 16px;
    opacity: .4;
    cursor: pointer;
    text-decoration: none;
    border-bottom: 4px solid transparent;
    display: block;
  }
  .tab-underlined:hover {
    opacity: 0.5;
  }
  .tab-underlined.active {
    opacity: 1;
    border-bottom: 3px solid #555555;
  }
}

HTML

<ul class="nav tabs-underlined" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <span class="nav-link tab-underlined active" id="bookings-tab" data-bs-toggle="tab" data-bs-target="#bookings-tab-pane" role="tab" aria-controls="bookings-tab-pane" aria-selected="true">Bookings</span>
  </li>
  <li class="nav-item" role="presentation">
    <span class="nav-link tab-underlined" id="requests-tab" data-bs-toggle="tab" data-bs-target="#requests-tab-pane" role="tab" aria-controls="requests-tab-pane" aria-selected="false">Requests</span>
  </li>
  <li class="nav-item" role="presentation">
    <span class="nav-link tab-underlined" id="conversations-tab" data-bs-toggle="tab" data-bs-target="#conversations-tab-pane" role="tab" aria-controls="conversations-tab-pane" aria-selected="false">Conversations</span>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade py-3 show active" id="bookings-tab-pane" role="tabpanel" aria-labelledby="bookings-tab" tabindex="0">
    This is the content for the Bookings tab. Notice in the tab HTML there is a href="#bookings". This is pointing to the id of this div..
  </div>
  <div class="tab-pane fade py-3" id="requests-tab-pane" role="tabpanel" aria-labelledby="requests-tab" tabindex="0">
    This is the content for the Requests tab. Notice in the tab HTML there is a href="#requests". This is pointing to the id of this div..
  </div>
  <div class="tab-pane fade py-3" id="conversations-tab-pane" role="tabpanel" aria-labelledby="conversations-tab" tabindex="0">
    This is the content for the Conversations tab. Notice in the tab HTML there is a href="#converstations". This is pointing to the id of this div.
  </div>
</div>

Make a Card Clickable in CSS

Douglas Berkley — Wed, 07 Dec 2022 01:58:41 +0000

On the surface, this one seems straight forward: a grid of clickable cards, easy right? Well as you may have seen when we use an anchor tag, it comes with some default styling we don't necessary want.

The Start

First, let's get a good looking card we can use. Let's take this one from the Le Wagon UI Kit.

Looks sharp, right? But let's see what happens when we wrap the same code inside of an anchor tag.

<a href="#">
  <!-- card html -->
</a>

Or the Rails way...

<%= link_to card_path do %>
  <!-- card html -->
<% end %>

The Problem

This just ruined all of our style. We can click on it, but all the text had that text-underline and unfortunate blue. So, let's take a step back and take a different approach.

The Solution

This might seem strange at first, but we're not going to wrap the card in the link. We're going three dimensional here. We're going to place the link over the card.

First: we build a link inside of our card with no text inside of our link to display. Let's also create a new class called card-link

<a href="#" class='card-link'></a>

Or the Rails way...

<%= link_to '', card_path, class: 'card-link'  %>

Second: we make our card position: relative, then we can make our link position: absolute

Third: we stretch the link over the entirety of the card. Our link won't take up an space, so we have to give it some special css attributes. Pin it to the corners then stretch over the entire width like this:

top: 0;
bottom: 0;
left: 0;
width: 100%;

Now we have a clickable card that looks like our original

CSS

.card-trip {
  overflow: hidden;
  background: white;
  box-shadow: 0 0 15px rgba(0,0,0,0.2);
  position: relative; // NEEDED FOR THE LINK
}

.card-trip > img {
  height: 200px;
  width: 100%;
  object-fit: cover;
}

.card-trip h2 {
  font-size: 16px;
  font-weight: bold;
  margin: 0;
}

.card-trip p {
  font-size: 12px;
  opacity: .7;
  margin: 0;
}

.card-trip .card-trip-infos {
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  position: relative;
}

.card-trip-infos .card-trip-user {
  position: absolute;
  right: 16px;
  top: -20px;
  width: 40px;
}

// To stretch the link on top of the card div
.card-link {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
}

The ERB Way

<div class="card-trip">
  <%= image_tag "https://raw.githubusercontent.com/lewagon/fullstack-images/master/uikit/greece.jpg" %>
  <div class="card-trip-infos">
    <div>
      <h2>Title here</h2>
      <p>Short description here!</p>
    </div>
    <h2 class="card-trip-pricing">£99.99</h2>
    <%= image_tag "https://kitt.lewagon.com/placeholder/users/dmbf29", class: "card-trip-user avatar-bordered" %>
  </div>
  <%= link_to '', card_path(element), class: 'card-link'  %>
  <!-- You need to replace card_path with your appropriate route  -->
</div>

The Pure HTML way

<div class="card-trip">
  <img src="https://raw.githubusercontent.com/lewagon/fullstack-images/master/uikit/greece.jpg" />
  <div class="card-trip-infos">
    <div>
      <h2>Title here</h2>
      <p>Short description here!</p>
    </div>
    <h2 class="card-trip-pricing">£99.99</h2>
    <img src="https://kitt.lewagon.com/placeholder/users/dmbf29" class="card-trip-user avatar-bordered" />
  </div>
  <a href="#" class='card-link'></a>
  <!-- You need to replace the href # with your appropriate route -->
</div>

Updating a Booking Status in Rails

Douglas Berkley — Wed, 07 Dec 2022 01:51:54 +0000

When building an Airbnb clone app, we often have a booking model in our application.(And hopefully you have a default status.). It should look something like this:

Really the only thing we're interested here is how to change the status to accepted or rejected as the owner of the offer. An AirBnb host isn't going to accept every offer that comes through. So how does this work? Do we create buttons? Links? Separate controller actions for accept and reject? No. I've seen a lot of different ways people try to solve this, but it's best to keep it simple.

We need a form. This form is just going to update our booking. This allows our bookings#update controller action to handle both the accepting and rejecting.

Setup the Route

Let's make sure we have the correct route in our routes.rb. This shouldn't be nested since the bookings already have an ID.

# routes.rb
resources :bookings, only: [:update]

Configure the Controller

Let's add the update action in the bookings controller (along with the strong params if they're missing). This is just standard CRUD, nothing special here.

# bookings_controller.rb
def update
  @booking = Booking.find(params[:id])
  if @booking.update(booking_params)
    # redirect_to # up to you...
  else
    # render # where was the booking update form?
  end
end

private

def booking_params
  # TODO: check your model, might be different than mine
  params.require(:booking).permit(:status, :start_time, :end_time)
end

Build your View

Now to the tough part. Let's go to your view where you want to accept and reject. This can be a couple places depending on how you build your routes.

I'm going to make another assumption here. You're either iterating over @bookings or something like current_user.bookings_as_owner.

<% @bookings.each do |booking| %>
  <!-- with the booking card here -->
<% end %>

You can design your cards how you see it fit with your application. But I'll let's just use a simple one to get started.

Okay now for those "buttons". We don't want just a normal button or link though. This is where we need the booking update form. Let's use simple_form_for (check out the docs here).

We're going to need two forms for each action. And we're going to hide the new status as a hidden field. The "button" is going to be the submit for the form. Like this:

<div class="d-flex">
  <%= simple_form_for booking do |f| %>
    <%= f.input :status, as: :hidden, input_html: { value: 'accepted'} %>
    <%= f.submit 'Accept', class: 'btn btn-info' %>
  <% end %>

  <%= simple_form_for booking do |f| %>
    <%= f.input :status, as: :hidden, input_html: { value: 'rejected'} %>
    <%= f.submit 'Reject', class: 'btn btn-light' %>
  <% end %>
</div>

Status Conditional

If your booking status is pending then we'll show the forms. Otherwise, we'll display the status.

Let's create a method in our model.
⚠️ If you are using status as an enum, you don't need this. You already have this method available.

# booking.rb (model)
def pending?
  status == 'pending'
end

Now we can use that method in our conditional

<% if booking.pending? %>
  <!-- Display Forms-->
<% else %>
  <!-- Display Status-->
  <p class='booking-tag'><%= booking.status %></p>
<% end %>

We should get some bookings like this now:

Wrap Up

Now all we have to do is build these forms in our iteration.

ERB

<div class="bookings">
  <% @bookings.each do |booking| %>
    <div class="booking">
      <div class='booking-left'>
        <!-- if you're using cloudinary and activestorage -->
        <%= cl_image_tag booking.user.photo, class: 'avatar-bordered' %>
        <div class="booking-info">
          <div class="booking-info-title">
            <%= booking.user.name %>
          </div>
          <div class="booking-info-details">
            <%= booking.start_time.strftime('%l:%M %p') %> - <%= booking.end_time.strftime('%l:%M %p') %>
          </div>
        </div>
      </div>
      <div class="booking-actions">
        <% if booking.pending? %>
          <%= simple_form_for booking do |f| %>
            <%= f.input :status, as: :hidden, input_html: { value: 'accepted'} %>
            <%= f.submit 'Accept', class: 'btn btn-info' %>
          <% end %>
          <%= simple_form_for booking do |f| %>
            <%= f.input :status, as: :hidden, input_html: { value: 'rejected'} %>
            <%= f.submit 'Reject', class: 'btn btn-light' %>
          <% end %>
        <% else %>
          <p class='booking-tag'><%= booking.status %></p>
        <% end %>
      </div>
    </div>
  <% end %>
</div>

CSS

.booking {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 16px 0;

  .booking-left {
    display: flex;
    align-items: center;
  }

  .booking-actions {
    display: flex;
    align-items: center;
  }
  .booking-tag {
    margin: 1px 4px;
    padding: 2px 5px 0px 5px;
    background-color: #bfbfbf;
    color: white;
    border-radius: 8px;
    font-weight: lighter;
    font-size: 12px;
  }
}

.booking-info {
  display: flex;
  flex-direction: column;
  margin-left: 8px;

  .booking-info-title {
    font-weight: bolder;
    font-size: 1.2em;
  }

  .booking-info-details {
    font-weight: lighter;
  }
}

Seeding Users with Photos in Rails

Douglas Berkley — Wed, 07 Dec 2022 01:27:13 +0000

When starting a new project, adding seeds gives life to your application. It gives you some initial data to play around with and adding users is normally an integral part of it. They tricky part is that we want it to feel real without actually using people's photos or information.

Using Faker

I'm going to assume that we're using Devise for our User model. That means we'll most likely be logging in with an email. Let's use the gem Faker, but you have to be careful with this one. Some of their emails are real. The last thing you want to do is accidentally email all of those @gmail.com addresses you seeded into your database.

If you use Faker::Internet.safe_email, then it'll guarantee you're using an email address that can't receive messages (ie: margert_huel@example.net). To counteract the @example.com, I like to use the real emails of the other members in my team. This allows them to always know an email they can sign in with. Otherwise every time you run your seeds, you'll have to open the Rails console and find a new users's email.

Don't forget to add the gem into your Gemfile.

gem 'faker', :git => 'https://github.com/faker-ruby/faker.git', :branch => 'main'

Once you've added the new gem, you need to make sure it's installed. From your Terminal:

bundle install

Attaching a Photo

We need to go inside our User model first (user.rb) and attach a photo

# ...
has_one_attached :photo
# ...

Take this as an example:

require "open-uri" # at the top

article = Article.new(title: 'NES', body: "A great console")
file = URI.open('https://giantbomb1.cbsistatic.com/uploads/original/9/99864/2419866-nes_console_set.png')
article.photo.attach(io: file, filename: 'nes.png', content_type: 'image/png')

But, that's only one photo on one instance of an article. How can we generate a unique photo for each user that we seed in the database? We can user this-person-does-not-exist.com. This website uses AI to generate photos of fake people.

So let's attach those AI photos to our users:

require 'open-uri'
require 'nokogiri'

50.times do
  user = User.create!(
  email: Faker::Internet.safe_email,
  password: '123123', # needs to be 6 digits,
  # add any additional attributes you have on your model
)
  # gender options: 'all' or 'male' or 'female'
  gender = 'male'
  # age options: 'all' or '12-18' or '19-25' or '26-35' or '35-50' or '50+'
  age = '19-25'
  # ethnicity options: 'all' or 'asian' or 'white' or 'black' or 'indian' or 'middle_eastern' or 'latino_hispanic'
  ethnicity = 'all'

  url = "https://this-person-does-not-exist.com/new?gender=#{gender}&age=#{age}&etnic=#{ethnicity}"
  json = URI.open(url).string
  src = JSON.parse(json)['src']
  photo_url = "https://this-person-does-not-exist.com#{src}"
  file = URI.open(photo_url)
  user.photo.attach(io: file, filename: 'user.png', content_type: 'image/png')
end

Make Sure They Attached

Go to your Terminal and open up a rails c

rails c

Pull up the last user and make sure a photo is attached

User.last.photo.attached? # if true, success!

DEV Community: Douglas Berkley

How to use nested attributes in Ruby on Rails (create multiple objects at once)

Introduction

Form Setup

Nested Form

Update the Model

Update the Controller

What is the @group.people.build doing?

Why is the @group.people.build needed?

Update the Strong Params

Going further...

Import the component

How to use nested attributes in Ruby on Rails (create associated objects in one form)

Introduction

Form Setup

Nested Form

Update the Model

Update the Controller

What is the @group.people.build doing?

Why is the @group.people.build needed?

Update the Strong Params

Going further...

Update total booking price on a form (like Airbnb) without refreshing using Stimulus

Airbnb Example

Setup

Stimulus controller

View

Active Record Scopes Tutorial - Rails - Booking example

Building Functional Tabs with Style

SCSS

HTML

Make a Card Clickable in CSS

The Start

The Problem

The Solution

CSS

The ERB Way

The Pure HTML way

Updating a Booking Status in Rails

Setup the Route

Configure the Controller

Build your View

Status Conditional

Wrap Up

ERB

CSS

Seeding Users with Photos in Rails

Using Faker

Attaching a Photo

Make Sure They Attached

What is the `@group.people.build` doing?

Why is the `@group.people.build` needed?

What is the `@group.people.build` doing?

Why is the `@group.people.build` needed?