【民泊6.0】【Windows】コントローラとビュー

メッセージコントローラを作成します。

コマンド
rails g controller messages create

「app\controllers\messages_controller.rb」ファイルを以下のように変更します。

記述変更　app\controllers\messages_controller.rb

class MessagesController < ApplicationController

  def create
    if current_user.id == message_params[:receiver_id]
      redirect_to request.referrer, alert: "自分にメッセージを送ることはできません"
    end
    conversation = Conversation.where("(sender_id = ? AND receiver_id = ?) OR (sender_id = ? AND receiver_id = ?)",
                                      current_user.id, message_params[:receiver_id], 
                                      message_params[:receiver_id], current_user.id
                                    ).first
    if !conversation.present?
      conversation = Conversation.create(sender_id: current_user.id, receiver_id: message_params[:receiver_id])
    end
    @message = Message.new(user_id: current_user.id, 
                           conversation_id: conversation.id,
                           content: message_params[:content]
    )
    if @message.save
      redirect_to request.referrer, notice: "メッセージを送りました。"
    else
      redirect_to request.referrer, alert: "メッセージを送ることができません。"
    end
  end

  private
  def message_params
    params.require(:message).permit(:content, :receiver_id)
  end
  
end

ビューの編集をします。

「app\views\users\show.html.erb」ファイルを以下のように編集します。

１．24～35行目に以下の記述を追加します。

<% if current_user.id != @user.id %>
    <a class="button is-black is-outlined is-fullwidth toggle-contact">メッセージを送る</a>
<% else %>
    <%= form_for :user, url: users_edit_url(@user), action: :update, method: :post do |f| %>
        <div class="file">
            <label class="button is-primary is-outlined is-fullwidth">
                <%= f.file_field :avatar, class: "file-input", onchange: "this.form.submit();" %>
                <i class="fas fa-upload"></i>&nbsp;&nbsp;&nbsp; アバター画像アップロード
            </label>
        </div>
    <% end %>
<% end %>

２．150行目に以下の記述を追加します。

<div class="modal" id="contact-form">
    <div class="modal-background"></div>
    <div class="modal-card">
        <header class="modal-card-head">
            <p class="modal-card-title">メッセージを送る</p>
            <button class="delete toggle-contact" aria-label="close"></button>
        </header>
        <section class="modal-card-body">
            <div class="columns">
                <div class="column is-one-third">
                    <div class="card" st>
                        <div class="card-content is-horizontal-center is-flex">
                            <figure class="image is-128x128">
                                <%= image_tag avatar_url(@user), class: "is-rounded" %>
                            </figure>
                        </div>
                        <div class="card-content">
                            <hr>
                            <strong>確認しましょう:</strong>
                            <ul class="is-size-7" style="list-style:initial">
                                <li>宿泊日時</li>
                                <li>宿泊場所</li>
                                <li>設備</li>
                                <li>キャンセルについて</li>
                            </ul>
                        </div>
                     </div>
                </div>   
                <div class="column">
                    <%= form_with model: Message.new do |f| %>
                        <%= f.hidden_field :receiver_id, value: @user.id %>
                        <div class="card-content">
                            <div class="field">
                                <div class="control">
                                    <%= f.text_area :content, class: "textarea" %>
                                </div>
                            </div>
                            <%= f.submit "メッセージを送る", class: "button is-danger is-pulled-right" %>
                        </div>
                    <% end %>
                </div>
            </div>
        </section>
    </div>
</div>

<script>
    var toggle_modals = $('.toggle-contact');
    if (toggle_modals) {
        toggle_modals.on('click', function(event) {
            event.stopPropagation();
            event.preventDefault();
            var form = document.getElementById('contact-form');
            form.classList.toggle('is-active');
        });
    }
</script>

記述更新　app\views\users\show.html.erb

<section class="section">
    <div class="container">
        <div class="columns">
        
            <!-- 左パネル -->
            <div class="column is-one-third">
                <div class="columns is-multiline">
                    <!-- 上部 -->
                    <div class="column is-full">
                        <div class="card">
                            <!-- アバター -->
                            <div class="card-content is-horizontal-center is-flex">
                                <figure class="image is-256x256">
                                    <%= image_tag avatar_url(@user), class: "is-rounded" %>
                                </figure>
                            </div>
                            
                            <div class="card-content">
                                <!-- 画像アップロードボタン -->
                                <div class="content has-text-centered">
                                    <p class="title is-5">
                                        <%= @user.full_name %>
                                    </p>
                                    <% if current_user.id != @user.id %>
                                        <a class="button is-black is-outlined is-fullwidth toggle-contact">メッセージを送る</a>
                                    <% else %>
                                        <%= form_for :user, url: users_edit_url(@user), action: :update, method: :post do |f| %>
                                            <div class="file">
                                                <label class="button is-primary is-outlined is-fullwidth">
                                                    <%= f.file_field :avatar, class: "file-input", onchange: "this.form.submit();" %>
                                                    <i class="fas fa-upload"></i>&nbsp;&nbsp;&nbsp; アバター画像アップロード
                                                </label>
                                            </div>
                                        <% end %>
                                    <% end %>                      
                                </div>
                                <hr class="h-10">
                                
                                <!-- アカウント情報 -->
                                <article class="media">
                                    <div class="media-content">アカウント登録日</div>
                                    <div class="media-right">
                                        <strong><%= I18n.l(@user.created_at, format: :full_date) %></strong>
                                    </div>
                                </article>
                                <hr class="h-10">
                                
                                <!-- オンラインステータス -->
                                <article>
                                    <div class="media">
                                        <div class="media-content">ステータス</div>
                                        <div class="media-right">
                                            <strong><% if @user.status %> オンライン <% else %> オフライン <% end %></strong>
                                        </div>
                                    </div>
                                </article>
                            </div>
                        </div>
                    </div>

                    <!-- 下部 -->
                    <div class="column is-full">
                        <div class="card">
                            <div class="card-content">
                                <!-- アカウント詳細 -->
                                <article>
                                    <div class="media">
                                        <div class="media-content">
                                            <p>
                                                <strong>自己紹介</strong>
                                                <br>
                                                <%= @user.about %>
                                            </p>
                                        </div>
                                    </div>
                                </article>
                                <hr class="h-10">
                                
                                <!-- 電話番号 -->
                                <article class="media">
                                    <div class="content">
                                    <% if !@user.phone_number.blank? %>
                                    <span class="pull-right icon-babu"><i class="far fa-check-circle" style="color:#528fff;"></i></span>&nbsp;&nbsp;電話番号
                                    <% end %>
                                    </div>
                                </article>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 右側 -->
            <div class="column">
            <h1 class="title is-5"><%= @user.full_name %>さんが登録しているお部屋(<%= @rooms.length %>)</h1>
            <br/>
                <div class="columns is-multiline">
                    
                    <!-- 登録したお部屋 -->
                    <% @user.rooms.each do |room| %>

                        <% if room.active? %>
                            <div class="column is-one-third">
                                <div class="card">
                                    <div class="card-image">
                                        <%= link_to listing_room_path(room) do %>
                                            <figure class="image is-4by3">
                                                <%= image_tag room_cover(room) %>
                                            </figure>
                                        <% end %>
                                    </div>
                                    <br/>
                                    <div class="card-content p-t-5 p-b-5">
                                        <p class="subtitle is-6 m-b-5"><%= link_to room.listing_name, room_path(room), data: { turbolinks: false} %></p>
                                        <p class="subtitle is-6 m-b-5"><%= room.address %></p>
                                        <!--レビュー -->
                                        
                                     </div>

                                    <footer class="card-footer">
                                        <a class="has-text-danger is-block card-footer-item has-text-right">
                                            <span class="small-title">１泊の宿泊価格</span> 
                                            <strong><%= number_to_currency(room.price) %></strong>                                            
                                        </a>
                                    </footer>
                                </div>
                            </div>
                        <% end %>
                    <% end %>

                </div>

                <div class="card">
                    <div class="card-header">
                        <div class="card-header-title">レビュー</div>
                    </div>
                    <div class="card-content">
                    <%= render "reviews/guest_list" %>
                    <%= render "reviews/host_list" %>
                    </div>
                </div>


            </div>
            
        </div>
    </div>
</section>

<div class="modal" id="contact-form">
    <div class="modal-background"></div>
    <div class="modal-card">
        <header class="modal-card-head">
            <p class="modal-card-title">メッセージを送る</p>
            <button class="delete toggle-contact" aria-label="close"></button>
        </header>
        <section class="modal-card-body">
            <div class="columns">
                <div class="column is-one-third">
                    <div class="card" st>
                        <div class="card-content is-horizontal-center is-flex">
                            <figure class="image is-128x128">
                                <%= image_tag avatar_url(@user), class: "is-rounded" %>
                            </figure>
                        </div>
                        <div class="card-content">
                            <hr>
                            <strong>確認しましょう:</strong>
                            <ul class="is-size-7" style="list-style:initial">
                                <li>宿泊日時</li>
                                <li>宿泊場所</li>
                                <li>設備</li>
                                <li>キャンセルについて</li>
                            </ul>
                        </div>
                     </div>
                </div>   
                <div class="column">
                    <%= form_with model: Message.new do |f| %>
                        <%= f.hidden_field :receiver_id, value: @user.id %>
                        <div class="card-content">
                            <div class="field">
                                <div class="control">
                                    <%= f.text_area :content, class: "textarea" %>
                                </div>
                            </div>
                            <%= f.submit "メッセージを送る", class: "button is-danger is-pulled-right" %>
                        </div>
                    <% end %>
                </div>
            </div>
        </section>
    </div>
</div>

<script>
    var toggle_modals = $('.toggle-contact');
    if (toggle_modals) {
        toggle_modals.on('click', function(event) {
            event.stopPropagation();
            event.preventDefault();
            var form = document.getElementById('contact-form');
            form.classList.toggle('is-active');
        });
    }
</script>

ルートの設定をします。
3行目に自動で追加された「get 'messages/create'」の記述は削除して下さい。

記述追加　config\routes.rb
22行目に「post 'messages', to: 'messages#create'」の記述を追加しています。

Rails.application.routes.draw do

  # ルートを　app\views\pages\home.html.erb　に設定
  root 'pages#home'

  devise_for :users, 
              path: '', 
              path_names: {sign_up: 'register', sign_in: 'login', edit: 'profile', sign_out: 'logout'},
              controllers: {omniauth_callbacks: 'omniauth_callbacks', registrations: 'registrations'}

  get 'pages/home'
  get '/dashboard', to: 'users#dashboard'
  get '/users/:id', to: 'users#show', as: 'user'
  get '/your_trips' => 'reservations#your_trips'
  get '/your_reservations' => 'reservations#your_reservations'
  get 'search' => 'pages#search'
  get 'settings/payment', to: 'users#payment', as: 'settings_payment'
  get 'settings/payout', to: 'users#payout', as: 'settings_payout'
  
  post '/users/edit', to: 'users#update'
  post '/settings/payment', to: 'users#update_payment', as: "update_payment"
  post 'messages', to: 'messages#create'

  resources :rooms, except: [:edit] do
    member do
      get 'listing'
      get 'pricing'
      get 'description'
      get 'photo_upload'
      get 'amenities'
      get 'location'
      get 'preload'
      get 'preview'
      delete :delete_photo
      post :upload_photo
    end
    resources :reservations, only: [:create]
  end

  resources :guest_reviews, only: [:create, :destroy]
  resources :host_reviews, only: [:create, :destroy]

  resources :reservations, only: [:approve, :decline] do
    member do
      post '/approve' => "reservations#approve"
      post '/decline' => "reservations#decline"
    end
  end
  
  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
end