プロフィール編集機能の実装

備忘録です！！

##新たなカラムの追加

userのアバター画像のカラムを生成します。

rails g migration add_avatar_to_users avatar:string

##viewの生成

プロフィール詳細画面として

profiles/show.html.erb

<% content_for(:title, 'プロフィール') %>
<div class="container pt-3">
  <div class="row">
    <div class="col-md-10 offset-md-1 mb-5">
      <h1 class="float-left"><%= t('.title') %></h1>
      <%=link_to "編集", edit_profile_path, class: 'btn btn-success float-right' %>
    </div>
    <div class="col-md-10 offset-md-1">
      <table class="table">
        <tbody>
          <tr>
            <th>
              <span>メールアドレス</span>
            </th>
            <td><%= current_user.email %></td>
          </tr>
          <tr>
            <th>
              <span>氏名</span>
            </th>
            <td><%= current_user.decorate.full_name %></td>
          </tr>
          <tr>
            <th>
              <span>アバター</span>
            </th>
            <td><%= image_tag current_user.avatar.url, size: '50x50', class: 'rounded-circle mr15' %></td>
          </tr>
          
        </tbody>
      </table>
    </div>
  </div>
</div>

プロフィール変更画面

edit.html.erb

<% content_for(:title, 'プロフィール編集') %>
<div class="container pt-3">
  <div class="row">
    <div class="col-md-10 offset-md-1 mb-5">
      <h1 class="float-left"><%= t('.title') %></h1>
    </div>
    <div class="col-md-10 offset-md-1">
      <%= form_with model: @user, url: profile_path, local: true do |f| %>
        <%= render "shared/error_messages", object: f.object %>
        <div class="form-group">
          <%= f.label :email %>
          <%= f.email_field :email, class: "form-control" %>
        </div>
        <div class="form-group">
          <%= f.label :last_name %>
          <%= f.text_field :last_name, class: "form-control" %>
        </div>
        <div class="form-group">
          <%= f.label :first_name %>
          <%= f.text_field :first_name, class: "form-control" %>
        </div>
        <div class="form-group">
          <%= f.label :avatar %>
          <%= f.file_field :avatar, class: "form-control", accept: 'image/*', onchange: 'previewFileWithId(preview)' %>
          <%= f.hidden_field :avatar_cache %>
          <div class='mt-3 mb-3'>
            <%= image_tag @user.avatar.url , size: '100x100', class: 'rounded-circle' %>
          </div>
        </div>
        <%= f.submit (t 'defaults.update'), class: "btn btn-primary"%>
      <% end %>  
    </div>
  </div>
</div>

##ルーティングの設定

今回は、resourcesではなく、resourceを使っていきます。

本来、/users/:id/edit、のようになるはずですが、もしidを変えれば、他のユーザーのプロフィール編集ページに入ることができてしまう可能性があります。（もちろん、入れないようにバリデーションはかけますが）

プロフィール変更ページは自分自身に対してしか使わないので、idを用いず、pofile/editとなるようにルーティングを設定していきます。

resource resource :profile, only: %i[show edit update]

##profileコントローラーの生成

rails g controller profiles

userの情報は、userモデルに紐づいたデータベースに保存されていますが、今回は新たにモデルに紐づかないprofileコントローラーを生成し、profileコントローラーでプロフィールの編集ページを実装していきます。

profile_controller.rb

def edit
  @user = User.find(current_user.id)
end

def update
  @user = User.find(current_user.id)
  if @user.update(user_params)
    redirect_to profile_path, success: t('defaults.message.edited', item: User.model_name.human)
  else
    flash.now['danger'] = t('defaults.message.not_edited', item: User.model_name.human)
    render :edit 
  end
end

private

def user_params
  params.require(:user).permit(:email, :first_name, :last_name, :avatar)
end

実装完了です！