[44] ページネーション << [ホームに戻る] >> [46] デプロイ| herokuアカウント
ダッシュボードに購入したプロジェクトを表示させるよう変更します。
「app\controllers\users_controller.rb」ファイルに以下の記述を追加します。
記述追加 app\controllers\users_controller.rb(6行目)
if !current_user.nil? @projects = current_user.projects end
app\controllers\users_controller.rb
class UsersController < ApplicationController before_action :authenticate_user! def dashboard if !current_user.nil? @projects = current_user.projects end end def show @user = User.find(params[:id]) end def update @user = current_user if @user.update_attributes(current_user_params) flash[:notice] = "保存しました" else flash[:alert] = "更新できません" end redirect_to dashboard_path end def update_payment if !current_user.stripe_id customer = Stripe::Customer.create( email: current_user.email, source: params[:stripeToken] ) else customer = Stripe::Customer.update( current_user.stripe_id, source: params[:stripeToken] ) end if current_user.update(stripe_id: customer.id, stripe_last_4: customer.sources.data.first["last4"]) flash[:notice] = "新しいカード情報が登録されました" else flash[:alert] = "無効なカードです" end redirect_to request.referrer rescue Stripe::CardError => e flash[:alert] = e.message redirect_to request.referrer end private def current_user_params params.require(:user).permit(:about, :status, :avatar) end end
何でも良いので「icon_add_cat.jpg」ファイルを「app\assets\images」フォルダにコピーしておいて下さい。
「app\views\users\dashboard.html.erb」ファイルに以下の記述を追加します。
記述追加 app\views\users\dashboard.html.erb(131行目)
<!-- 購入したプロジェクト --> <% if @projects.count > 0 %> <% @projects.each do |project| %> <%= link_to project do %> <div class="card"> <div class="card-image"> <%= link_to project_path(project) do %> <figure class="image is-4by3"> <%= image_tag project_cover(project) %> </figure> <% end %> </div> <div class="card-content p-t-5 p-b-5"> <h4 class="title is-6" style="color: black; margin: 10px;"><%= project.name %></h4> <span class="star-review"><i class="fa fa-star"></i> <%= project.average_rating %> <span class="has-text-primary">(<%= project.reviews.count %>)</span> </span> </div> <div class="card-content p-t-5 p-b-5"> <h4 class="title is-6" style="color: black; margin: 5px;">タスク <i class="far fa-clock"></i> <%= project.tasks.count %></h4> </div> <div class="card-content p-t-5 p-b-5"> <%= link_to users_path(project.user.id), class: "tootip" do %> <figure class="image is-48x48"> <%= image_tag avatar_url(project.user), class: "is-rounded" %> <span class="tag is-light"><%= project.user.full_name %></span> </figure> <% end %> </div> <br/> <div class="tag is-danger is-medium">購入済み</div> <br/> <br/> </div> <% end %> <% end %> <% else %> <!-- 新しいプロジェクトを購入する --> <%= link_to project_index_path do %> <div class="card"> <div class="card-image card-content is-horizontal-center is-flex "> <figure class="image is-256x256 is-rounded"> <%= image_tag 'icon_add_cat.jpg', class: "is-rounded" %> </figure> </div> <div class="card-content"> <strong>プロジェクトを購入する</strong> </div> </div> <% end %> <% end %>
app\views\users\dashboard.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"> <!--通知 --> <article class="media"> <div class="content" style="margin-left: 30px; margin-bottom: 10px;"> <%= link_to notifications_path do %> <span id="num_of_unread"><%= current_user.unread %></span> 件の通知があります。 <% end %> </div> </article> <div class="card"> <!-- アバター --> <div class="card-content is-horizontal-center is-flex"> <figure class="image is-256x256"> <%= image_tag avatar_url(current_user), class: "is-rounded" %> </figure> </div> <div class="card-content"> <!-- 画像アップロードボタン --> <div class="content has-text-centered"> <p class="title is-5"> <%= current_user.full_name %> </p> <%= 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> アバター画像アップロード </label> </div> <% end %> </div> <hr class="h-10"> <!-- アカウント情報 --> <article class="media"> <div class="media-content">アカウント登録日</div> <div class="media-right"> <strong><%= I18n.l(current_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 current_user.status %> オンライン <% else %> オフライン <% end %></strong> <i class="toggle far fa-edit" aria-controls="user-status"></i> </div> </div> <div class="content"> <%= form_for :user, url: users_edit_url(@user), action: :update, method: :post, html: {id: 'user-status', class: 'is-hidden'} do |f| %> <div class="field"> <%= f.select(:status, options_for_select([["オンライン", true], ["オフライン", false]]), {}, {class: "select is-fullwidth"}) %> </div> <a class="toggle button is-light" aria-controls="user-status">キャンセル</a> <%= f.submit "保存", class: "button is-danger" %> <% end %> </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> <%= current_user.about %> </p> </div> <div class="media-right"> <i class="toggle far fa-edit" aria-controls="user-about"></i> </div> </div> <div class="content"> <%= form_for :user, url: users_edit_url(@user), action: :update, method: :post, html: {id: 'user-about', class: 'is-hidden'} do |f| %> <div class="field"> <%= f.text_area :about, autofocus: true, autocomplete: 'form', class: 'input'%> </div> <a class="toggle button is-light" aria-controls="user-about">キャンセル</a> <%= f.submit "保存", class: "button is-danger" %> <% end %> </div> </article> <hr class="h-10"> <!-- アカウント連携 --> <article class="media"> <div class="content"> <p> <strong>アカウント連携</strong><br/> <% if current_user.provider == 'google_oauth2' %> <span class="has-text-success">Googleアカウントでログイン中</span> <% else %> <span class="has-text-danger">アカウント連携していません</span> <% end %> </p> </div> </article> </div> </div> </div> </div> </div> <!-- 右側 --> <div class="column"> <div class="columns is-multiline"> <!-- 購入したプロジェクト --> <div class="column is-one-third has-text-centered"> <!-- 購入したプロジェクト --> <% if @projects.count > 0 %> <% @projects.each do |project| %> <%= link_to project do %> <div class="card"> <div class="card-image"> <%= link_to project_path(project) do %> <figure class="image is-4by3"> <%= image_tag project_cover(project) %> </figure> <% end %> </div> <div class="card-content p-t-5 p-b-5"> <h4 class="title is-6" style="color: black; margin: 10px;"><%= project.name %></h4> <span class="star-review"><i class="fa fa-star"></i> <%= project.average_rating %> <span class="has-text-primary">(<%= project.reviews.count %>)</span> </span> </div> <div class="card-content p-t-5 p-b-5"> <h4 class="title is-6" style="color: black; margin: 5px;">タスク <i class="far fa-clock"></i> <%= project.tasks.count %></h4> </div> <div class="card-content p-t-5 p-b-5"> <%= link_to users_path(project.user.id), class: "tootip" do %> <figure class="image is-48x48"> <%= image_tag avatar_url(project.user), class: "is-rounded" %> <span class="tag is-light"><%= project.user.full_name %></span> </figure> <% end %> </div> <br/> <div class="tag is-danger is-medium">購入済み</div> <br/> <br/> </div> <% end %> <% end %> <% else %> <!-- 新しいプロジェクトを購入する --> <%= link_to project_index_path do %> <div class="card"> <div class="card-image card-content is-horizontal-center is-flex "> <figure class="image is-256x256 is-rounded"> <%= image_tag 'icon_add_cat.jpg', class: "is-rounded" %> </figure> </div> <div class="card-content"> <strong>プロジェクトを購入する</strong> </div> </div> <% end %> <% end %> </div> </div> </div> </div> </div> </section>
ブラウザ確認
http://localhost:3000/dashboard
ユーザプロフィールページにも購入したプロジェクトを表示させます。
「app\controllers\users_controller.rb」ファイルに以下の記述を追加します。
記述追加 app\controllers\users_controller.rb(14行目)
if !current_user.nil? @projects = @user.projects end
app\controllers\users_controller.rb
class UsersController < ApplicationController before_action :authenticate_user! def dashboard if !current_user.nil? @projects = current_user.projects end end def show @user = User.find(params[:id]) if !current_user.nil? @projects = @user.projects end end def update @user = current_user if @user.update_attributes(current_user_params) flash[:notice] = "保存しました" else flash[:alert] = "更新できません" end redirect_to dashboard_path end def update_payment if !current_user.stripe_id customer = Stripe::Customer.create( email: current_user.email, source: params[:stripeToken] ) else customer = Stripe::Customer.update( current_user.stripe_id, source: params[:stripeToken] ) end if current_user.update(stripe_id: customer.id, stripe_last_4: customer.sources.data.first["last4"]) flash[:notice] = "新しいカード情報が登録されました" else flash[:alert] = "無効なカードです" end redirect_to request.referrer rescue Stripe::CardError => e flash[:alert] = e.message redirect_to request.referrer end private def current_user_params params.require(:user).permit(:about, :status, :avatar) end end
「app\views\users\show.html.erb」ファイルを以下のように編集します。
記述追加 app\views\users\show.html.erb(108行目)
<% if @projects.count > 0 %> <% @projects.each do |project| %> <%= link_to project do %> <div class="card"> <div class="card-image"> <%= link_to project_path(project) do %> <figure class="image is-4by3"> <%= image_tag project_cover(project) %> </figure> <% end %> </div> <div class="card-content p-t-5 p-b-5"> <h4 class="title is-6" style="color: black; margin: 10px;"><%= project.name %></h4> <span class="star-review"><i class="fa fa-star"></i> <%= project.average_rating %> <span class="has-text-primary">(<%= project.reviews.count %>)</span> </span> </div> <div class="card-content p-t-5 p-b-5"> <h4 class="title is-6" style="color: black; margin: 5px;">タスク <i class="far fa-clock"></i> <%= project.tasks.count %></h4> </div> </div> <% end %> <% end %> <% else %> <div class="card-content"> <strong>まだプロジェクトを購入していません</strong> </div> <% end %>
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> アバター画像アップロード </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"> <p> <strong>アカウント連携</strong><br/> <% if current_user.provider == 'google_oauth2' %> <span class="has-text-success">Googleアカウントでログイン中</span> <% else %> <span class="has-text-danger">アカウント連携していません</span> <% end %> </p> </div> </article> </div> </div> </div> </div> </div> <!-- 右側 --> <div class="column"> <div class="columns is-multiline"> <!-- 購入したプロジェクト --> <div class="column is-one-third has-text-centered"> <% if @projects.count > 0 %> <% @projects.each do |project| %> <%= link_to project do %> <div class="card"> <div class="card-image"> <%= link_to project_path(project) do %> <figure class="image is-4by3"> <%= image_tag project_cover(project) %> </figure> <% end %> </div> <div class="card-content p-t-5 p-b-5"> <h4 class="title is-6" style="color: black; margin: 10px;"><%= project.name %></h4> <span class="star-review"><i class="fa fa-star"></i> <%= project.average_rating %> <span class="has-text-primary">(<%= project.reviews.count %>)</span> </span> </div> <div class="card-content p-t-5 p-b-5"> <h4 class="title is-6" style="color: black; margin: 5px;">タスク <i class="far fa-clock"></i> <%= project.tasks.count %></h4> </div> </div> <% end %> <% end %> <% else %> <div class="card-content"> <strong>まだプロジェクトを購入していません</strong> </div> <% end %> </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> </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>
ブラウザ確認
http://localhost:3000/users/2
↓↓クリックして頂けると励みになります。
