Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What is going on with this article?
@mtomoko15

【Rails】通知機能

はじめに

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

完成イメージ

スクリーンショット 2020-12-23 14.49.04.png

通知のモデルを作成

お問い合わせ機能(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を入れていればもうちょっとシンプルだと思いますが...:sweat:

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

最後に

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

1
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
mtomoko15
2020年10月〜プログラミングスクールに通い、プログラミング学習を初めました。 HTML/CSSから始まり、スクールではRuby On Railsをメインに学習しました。 数ヶ月後の自分の為に、コードや知識を書き溜めていきます。 よろしくお願いします。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
1
Help us understand the problem. What is going on with this article?