【民泊6.0】【MacOSX】ダッシュボード

ユーザーモデルに項目を追加します。


コマンド
rails g migration AddColumsToUser about:text status:boolean




「db\migrate\20200723123617_add_colums_to_user.rb」ファイルの記述を以下のように更新します。


記述更新　db\migrate\20200723123617_add_colums_to_user.rb
4行目に「, default: false」の記述を追加しています。

class AddColumsToUser < ActiveRecord::Migration[6.0]
  def change
    add_column :users, :about, :text
    add_column :users, :status, :boolean, default: false
  end
end

コマンド
rails db:migrate


ダッシュボードコントローラーを作成します。


コマンド
rails g controller Users dashboard


作成したユーザコントローラの内容を更新します。


記述更新　app\controllers\users_controller.rb

class UsersController < ApplicationController
  before_action :authenticate_user!

  def dashboard
  end

  def update
    @user = current_user
    if @user.update_attributes(current_user_params)
      flash[:notice] = "保存しました"
    else
      flash[:alert] = "更新できません"
    end
    redirect_to dashboard_path
  end

  private

  def current_user_params
    params.require(:user).permit(:about, :status)
  end

end

ルートの設定をします。


記述追加　config\routes.rb(12行目)

  get '/dashboard', to: 'users#dashboard'

  post '/users/edit', to: 'users#update'

自動で3行目に追加された記述「get 'users/dashboard'」は削除します。


config\routes.rb

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: {registrations: 'registrations'}

  get 'pages/home'
  get '/dashboard', to: 'users#dashboard'
  
  post '/users/edit', to: 'users#update'

  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
end

「app\controllers\application_controller.rb」ファイルに以下の記述を追加します。


記述追加　app\controllers\application_controller.rb(12行目)

    def after_sign_in_path_for(resource)
        dashboard_path
    end

app\controllers\application_controller.rb

class ApplicationController < ActionController::Base

    before_action :configure_permitted_parameters, if: :devise_controller?

    protected
    
    def configure_permitted_parameters
        devise_parameter_sanitizer.permit(:sign_up, keys: [:full_name])
        devise_parameter_sanitizer.permit(:account_update, keys: [:full_name])
    end

    def after_sign_in_path_for(resource)
        dashboard_path
    end    

end

ナビゲーションバーを更新します。


記述追加　app\views\shared\_navbar.html.erb(47行目)

<% if (user_signed_in?) %>
    <nav class="navbar has-shadow" style="z-index: 3;">
        <div class="container">
            <div class="navbar">
                <%= link_to 'ダッシュボード', dashboard_path, class: "navbar-item" %>
                <div class="navbar-item has-dropdown is-hoverable">
                    <a class="navbar-link">ホスト</a>
                    <div class="navbar-dropdown">
                        <a class="navbar-item"></a>
                        <a class="navbar-item"></a>
                    </div>
                </div>
                <div class="navbar-item has-dropdown is-hoverable">
                    <a class="navbar-link">ゲスト</a>
                    <div class="navbar-dropdown">
                        <a class="navbar-item"></a>
                        <a class="navbar-item"></a>
                    </div>
                </div>
            </div>
        </div>
    </nav>
<% end %>

app\views\shared\_navbar.html.erb

<nav class="navbar is-light" role="navigation" aria-label="main navigation">
    <div class="navbar-brand">
        <a class="navbar-item" href="/">
            <h1>テストサイトMinpaku6</h1>
        </a>
        <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
        </a>
    </div>
    
    <div id="navbarBasicExample" class="navbar-menu">
        <div class="navbar-start">
            <div class="navbar-item">
            </div>
        </div>
        <div class="navbar-end">
            <a class="navbar-item"></a>
            <a class="navbar-item"></a>

            <!-- もしログインしていなかったら-->
            <% if (!user_signed_in?) %>
                <div class="navbar-item">
                    <div class="buttons">
                        <%= link_to  "新規ユーザ登録", new_user_registration_path, class: "button is-white" %>
                        <%= link_to  "ログイン", new_user_session_path, class: "button is-white" %>
                    </div>
                </div>

            <!-- ログインしていたら　-->
            <% else %>
                <div class="navbar-item has-dropdown is-hoverable" style="margin-right: 100px;">
                    <a class="navbar-item"><%= current_user.full_name %></a>
                    <div class="navbar-dropdown">
                        <%= link_to  "ユーザ登録情報編集", edit_user_registration_path, class: "navbar-item" %>
                        <a href="" class="navbar-item"></a>
                        <hr class="navbar-divider">
                        <%= link_to  "ログアウト", destroy_user_session_path, method: :delete, class: "navbar-item" %>
                    </div>
                </div>
            <% end %>            
        </div>
    </div>
</nav>

<% if (user_signed_in?) %>
    <nav class="navbar has-shadow" style="z-index: 3;">
        <div class="container">
            <div class="navbar">
                <%= link_to 'ダッシュボード', dashboard_path, class: "navbar-item" %>
                <div class="navbar-item has-dropdown is-hoverable">
                    <a class="navbar-link">ホスト</a>
                    <div class="navbar-dropdown">
                        <a class="navbar-item"></a>
                        <a class="navbar-item"></a>
                    </div>
                </div>
                <div class="navbar-item has-dropdown is-hoverable">
                    <a class="navbar-link">ゲスト</a>
                    <div class="navbar-dropdown">
                        <a class="navbar-item"></a>
                        <a class="navbar-item"></a>
                    </div>
                </div>
            </div>
        </div>
    </nav>
<% end %>

<script>
    $(document).ready(function() {
    // navbar burgerアイコンでクリックイベントを確認する
    $(".navbar-burger").click(function() {
        // 「navbar-burger」と「navbar-menu」の両方で「is-active」クラスを切り替える
        $(".navbar-burger").toggleClass("is-active");
        $(".navbar-menu").toggleClass("is-active");
    });
    });
</script>

ブラウザ確認
http://localhost:3000/dashboard


ログインするとダッシュボードが表示されるようになり、２つ目のナビゲーションバーが設置されました。

ナビゲーションバー更新