認証済みマークの実装(enum)

この記事で分かること

• 管理者側から公認された場合、ユーザネームに認証済みマークを付与する

前提条件

• user/show,editページが実装済み
• enum_helpが実装済み
• Font fontawesomeが実装済み

完成イメージ

ユーザー側

管理者側

テーブル

実装手順

1. enumの実装
2. admin側のユーザ編集の作成
3. public側のユーザ詳細に反映

実装方法

実装手順に沿って紹介します。

1. enumの実装

Usersモデルに記述

Usersモデルにenumの内容を記述する。

user.rb

  #認証マークの付与
  enum certification_status:  { "unachieved": 0, "achieved": 1, "admin": 2 }

補足

モデル作成のとき、デフォルト値を0:認証未達になるように調整すること

config/locales/ja.yml

  ja:
    enums:
      user:
       position_status:
          normal: "一般"
          company: "企業"
+      certification_status:
+         unachieved: "未達"
+         achieved: "認証"
+         admin: "管理者"
       range:
          User: "ユーザー名"
          Item: "商品名/会社名"
      product:
       active_status:
          sale: "販売中"
          limited_time_sale: "期間限定販売"
          end_of_sale: "販売終了"

インデントがズレると反映されなくなるので注意

2. admin側のユーザ編集の作成

admin/users/edit.html.erb

 <div class= "container py-5 px-sm-0">
  <div class= "row justify-content-center">
    <%= form_with model: @user,url: admin_user_path(@user), local: true do |f| %>
      <div class = "form-group col-12">
        <label for="inputName">ユーザー名</label><br>
        <%= f.text_field :name, autofocus: true, id:"inputName form-control" ,class: "inputName form-control" %>
      </div>
      <div class = "form-group col-12">
        <label for="inputImage">プロフィール画像</label><br>
        <%= f.file_field :profile_image, placeholder: "プロフィール画像", accept: "image/*" %>
      </div>
      <div class = "form-group col-12">
        <label for="inputIntroduction">自己紹介</label><br>
        <%= f.text_area :introduction, autofocus: true, id:"inputintroduction",class: "inputIntroduction form-control"  %>
      </div>
      <div class = "form-group col-12">
        <label for="inputAddress">ホームページ</label><br>
        <%= f.text_field :address, autofocus: true, id:"inputAddress form-control" ,class: "inputAddress form-control" %>
      </div>
      <div class="form-group text-center col-12">
        <span class= "mr-5">会員ステータス</span>
          <%= f.radio_button :is_deleted, :false %>
          <%= f.label :is_active_false, "有効" %>
          <%= f.radio_button :is_deleted, :true %>
          <%= f.label :is_active_true, "退会" %>
      </div>
+     <div class = "form-group col-12">
+       <label for="inputAddress">認証ステータス</label><br>
+       <%= f.select( :certification_status, User.certification_statuses_i18n.invert, {}, class: 'form-control text-center')%>
+     </div>
      <div class = "form-group row justify-content-center">
        <%= f.submit "更新する",class: "btn btn-success" %>
      </div>
    <% end %>
  </div>
 </div>

補足

<%= f.select( :enum名, モデル名.enum名複数形_i18n.invert)%>
一覧表示できる(enum_helpのメソッド)

3. public側のユーザ詳細に反映

部分テンプレートで作成

_user_certification.html.erb

<% if user.certification_status == "unachieved" %>
 <div></div>
<% elsif user.certification_status == "achieved" %>
 <i class="fa-regular fa-circle-check text-success"></i>
<% else %>
 <i class="fa-regular fa-circle-check text-danger"></i>
  <% end %>

if文で場合分けし表示を確認したら完成です。

感想

enumの復習になりました。enumはデフォルトで0に設定されると思っていたのですが、自分から設定しないと0に設定されませんでした。またenumについて調べようと思います。

この記事をかいた人

https://twitter.com/tya_dwc
23/6/1にDWCに入学し、主にRailsの学習に取り組みました。卒業が近づきこれから何で学習をするか悩んだときに、技術ブログをしようと考えました。初心者ですがよろしくお願いします。