【Rails】通知機能

はじめに

お店のWebサイトを作成し、お客様がお問い合わせを投稿し管理者側のヘッダーに新規お問い合わせがあれば通知のマークが付くようにしました。
お問い合わせ一覧を見ると通知マークは消えます。

完成イメージ

通知のモデルを作成

お問い合わせ機能(contact)は実装済み前提で進めさせて頂きます。

$ rails g model Notification contact_id:integer checked:boolean

db/migrate/..._create_notifications.rb

class CreateNotifications < ActiveRecord::Migration[5.2]
  def change
    create_table :notifications do |t|
      t.integer :contact_id
      t.boolean :checked, default: false, null: false #追記

      t.timestamps
    end
  end
end

checkedカラムにdefault: false,null: falseを追記します。
意味合いとして、通知を確認したかどうかの初期値は、false（通知未確認）に。また、null: falseで指定したカラムが空で保存されるのを防ぎます。

アソシエーションの設定

app/models/contact.rb

class Contact < ApplicationRecord
 has_many :notifications,dependent: :destroy
end

app/models/notifications.rb

class Notification < ApplicationRecord
  belongs_to :contact

  def self.confirmed
    unchecked_notifications = where(checked: false) 
    unchecked_notifications.each do |un|
      un.update!(checked: true)
    end
  end
end

self.confirmedでクラスメソッドを定義しています。
whereメソッドでcheckedカラムがfalse(未読)のデータを全て取得し、
次の行でfalseのデータを変数に渡し、checked: trueにupdateしています。

app/controllers/directors/contacts_controller.rb

class Directors::ContactsController < ApplicationController
before_action :authenticate_director!
  def index
    @contacts = Contact.page(params[:page]).per(6) 
    Notification.confirmed
  end
end

今回は、管理者(directorモデル)のみログイン機能を持たせているのでその辺りの記述も入ってきています。
Notification.confirmedでモデル内で記述しているクラスメソッドを呼び出します。

viewに表示

あともう少しです！

app/controllers/application_controller.rb

class ApplicationController < ActionController::Base
 before_action :check_notifications
  def check_notifications
    @unchecked_notifications = Notification.where(checked:false)
  end
end

app/views/layouts/application.html.erb

          <li><%= link_to ' About', about_path %></li>
          <li><%= link_to ' Blog', directors_blogs_path %></li>
          <li><%= link_to ' Course', directors_fees_path %></li>
          <li><%= link_to ' Schelule', directors_schedules_path %></li>
          <li><%= link_to ' Contact', directors_contacts_path %>
          <% if @unchecked_notifications.any? %>
          <span style="background-color: gold;width:10px;height:10px;top:14px;left:10px;position:absolute;border-radius:50%;"></span>
          <% end %>

ヘッダーの記述です。
htmlの記述に関して、ifとany?を組み合わせると、条件に一致した要素が存在する場合や配列の要素チェックが可能になります。つまり、コントローラーで定義しているcheckedがfalse(未読)であること、が条件となります。
spanタグ内の記述は、通知の◯マークを作っています。fontawesomeを入れていればもうちょっとシンプルだと思いますが...

これで、contact一覧を表示すると通知マークが消えるように実装ができました！

最後に

私は今回の実装で、クラスメソッドやany?メソッドの使い方について学習しました。
より詳しく知りたい方は調べてみてください
表現や記述など、拙いところばかりかと思いますがここまで読んで頂きありがとうございます