⭐️[管理画面] 掲示板/ユーザのCRUD機能の作成

概要

  • 管理画面に、掲示板のCRUD機能を作成してください。

  • 管理画面に、ユーザーのCRUD機能を作成してください。

手順

・今回の課題では、今までの課題で使ったことがある機能もあったので、
この課題で新しく出てきた機能で、自分の理解の薄い内容のみアウトプットしていきます!

メニューのアクティブ・非アクティブ化

Bootstrapを使用しているので、例えば下記のようにclassにactiveを含めると、アクティブにしてくれます。

<a class="nav-link active" href="#">Active</a>

これを使って、アクティブにしたいときにはclassactiveを含めるようにして実装していきます。

Image from Gyazo

三項演算子を使って、真のときはactive、偽のときは何も返さない('')ようにします。
controller_pathコントローラー名を取得できる。

・view(_sidebar.html.erb)で、ヘルパーメソッドを使い
そのメニューにいる時にメニューをアクティブ
いない時に非アクティブに出来る。

<li class="nav-item">
  <%= link_to admin_boards_path, class: "nav-link #{active_if('admin/boards')}" do %>
    <i class="nav-icon far fa-file"></i>
    <p>
      <%= t('boards.index.title') %>
    </p>
  <% end %>
</li>
<li class="nav-item">
   <%= link_to admin_users_path, class: "nav-link #{active_if('admin/users')}" do %>
       <i class="nav-icon far fa-user"></i>
            <p>
              <%= t('users.index.title') %>
            </p>
    <% end %>
</li>
ransackを使った範囲指定の検索機能

今回は作成日を指定して検索できるように実装しました。 掲示板の「いつからいつまで」の検索条件について、「いつまで」部分をカスタマイズします。

Image from Gyazo

・config/initializers配下にransack.rbファイルを作成し、lteq_end_of_dayというpredicate(述語)を追加します。

predicate(述語)とは、
title_or_body_cont の、_contのような検索する範囲を定義するものだと解釈しました。

created_at_lteqだと0:00が基準になってしまうので正しく絞り込みができないので、
lteqをカスタマイズしたいと思います。

arel_predicate: 'lteq'

でカスタマイズしたいpredicateを指定。

formatter: proc { |v| v.end_of_day }

では、end_of _dayというすでに裏方で定義されているメソッドを
formatter: proc { |v| v.〇〇}の〇〇に代入すれば、 lteqをend_of_dayに置き換えることができる。
end_of_dayとはデフォルトの設定を置き換えることができるメソッド。

https://api.rubyonrails.org/classes/Time.html#method-i-end_of_day

・viewに反映

app/views/admin/users/_search.html.erb
  
<%= search_form_for @search, url: admin_users_path do |f| %>
  <div class="row">
    <div class="form-inline align-items-center mx-auto">
      <div class="col-auto">
        <%= f.search_field :first_name_or_last_name_cont, class: 'form-control', placeholder: t('defaults.search_word') %>
      </div>
      <div class="col-auto">
        <%= f.select :role_eq, User.roles_i18n.invert.map{|key, value| [key, User.roles[value]]}, { include_blank: t('defaults.unspecified') }, { class: 'form-control mr-1' } %>
      </div>
      <div class="col-auto">
        <%= f.submit class: 'btn btn-primary' %>
      </div>
    </div>
  </div>
<% end %>

Image from Gyazo

enum_helpを使ったenum値の多言語化対応

  

gem 'enum_help'


bundle install

enum_helpというgemを導入する。
config/locales配下に日本語化用のファイルを下記のように用意。

ja:
  enums:
    user:
      role:
        general: 一般
        admin: 管理者

Userモデルで定義している

enum role: { general: 0, admin: 1 }

この記述を下記のようにi18nの翻訳機能を使う事によって、ユーザーのrole(権限)も翻訳したものを表示できるようになる。

# app/views/admin/users/_user.html.erb
  
<%= user.role_i18n %>

Image from Gyazo

✅総括

今回の課題で基礎編は終わりなので、応用編に進む前にしっかりと自分の理解が足りていない箇所の復習をして更なる知識や自走力の向上に向けて学習の方頑張っていきたいです!!