#はじめに
お店のWebサイトを作成し、お客様がお問い合わせを投稿し管理者側のヘッダーに新規お問い合わせがあれば通知のマークが付くようにしました。
お問い合わせ一覧を見ると通知マークは消えます。
#通知のモデルを作成
お問い合わせ機能(contact)は実装済み前提で進めさせて頂きます。
$ rails g model Notification contact_id:integer checked:boolean
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で指定したカラムが空で保存されるのを防ぎます。
#アソシエーションの設定
class Contact < ApplicationRecord
has_many :notifications,dependent: :destroy
end
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しています。
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に表示
あともう少しです!
class ApplicationController < ActionController::Base
before_action :check_notifications
def check_notifications
@unchecked_notifications = Notification.where(checked:false)
end
end
<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?メソッドの使い方について学習しました。
より詳しく知りたい方は調べてみてください
表現や記述など、拙いところばかりかと思いますがここまで読んで頂きありがとうございます