【学習5.0】【MacOSX】サブスクリプション

モデルを作成していきます。

コマンド
rails g model Subscription project:references user:references

「db\migrate\20200715223129_create_subscriptions.rb」ファイルを編集します。

記述追加　db\migrate\20200715223129_create_subscriptions.rb
9行目に「add_index :subscriptions, [:project_id, :user_id], unique: true」の記述を追加しています。

class CreateSubscriptions < ActiveRecord::Migration[5.0]
  def change
    create_table :subscriptions do |t|
      t.references :project, foreign_key: true
      t.references :user, foreign_key: true

      t.timestamps
    end
    add_index :subscriptions, [:project_id, :user_id], unique: true
  end
end

コマンド　マイグレーション適用
rails db:migrate

「app\models\project.rb」ファイルに以下の記述を追加します。

記述追加　app\models\project.rb(3,4行目)

    has_many :subscriptions
    has_many :users, through: :subscriptions

app\models\project.rb

class Project < ApplicationRecord
    has_many :tasks
    has_many :subscriptions
    has_many :users, through: :subscriptions

    validates :name, presence: true, length: { maximum: 50 }
    validates :content, presence: true, length: { maximum: 500 }
    validates :price, presence: true, numericality: { only_integer: true }

    has_attached_file :image, styles: { medium: "680x300>", thumb: "170x75>" }
    validates_attachment_content_type :image, content_type: /\Aimage\/.*\z/

end

「app\models\user.rb」ファイルに以下の記述を追加します。

記述追加　app\models\user.rb(3,4行目)

   has_many :subscriptions
   has_many :projects, through: :subscriptions

app\models\user.rb

class User < ApplicationRecord

  has_many :subscriptions
  has_many :projects, through: :subscriptions

  # アバター画像表示用
  include Gravtastic
  gravtastic

  # Include default devise modules. Others available are:
  # :confirmable, :lockable, :timeoutable, :trackable and :omniauthable
  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :validatable,
         :confirmable, :omniauthable

  #長さ50文字以下　入力必須
  validates :full_name, presence: true, length: {maximum: 50}

  def self.from_omniauth(auth)
    user = User.where(email: auth.info.email).first

    if user
      return user
    else
      where(provider: auth.provider, uid: auth.uid).first_or_create do |user|
        user.email = auth.info.email
        user.password = Devise.friendly_token[0, 20]
        user.full_name = auth.info.name   # ユーザーモデルに名前があると仮定
        user.image = auth.info.image # ユーザーモデルに画像があると仮定

        user.uid = auth.uid
        user.provider = auth.provider

      end
    end
  end

end

コントローラを作成していきます。

「app\controllers」フォルダに「charge_controller.rb」ファイルを新規作成します。

app\controllers\charge_controller.rb(新規作成したファイル)

class ChargeController < ApplicationController
	
	before_action :authenticate_user!

	def free
		project = Project.find(params[:project_id])
		current_user.subscriptions.create(project: project)

		redirect_to project
	end
end

「app\controllers\project_controller.rb」ファイルの編集をします。

１．記述追加　app\controllers\project_controller.rb(10～16行目)
「show()」メソッドの記述を追加しています。

  def show
    @project = Project.find(params[:id])
  	@tasks = @project.tasks.order(:tag)

    @joined = false

    	if !current_user.nil? && !current_user.projects.nil?
    		@joined = current_user.projects.include?(@project)
    	end

    	@users = @project.users.order('created_at desc').first(10)


  end

２．記述追加　app\controllers\project_controller.rb(20～24行目)
新たに「list()」メソッドを追加しています。

  def list
    if !current_user.nil?
      @projects = current_user.projects
    end
  end

app\controllers\project_controller.rb

class ProjectController < ApplicationController
  def index
  	@projects = Project.all
  end

  def show
  	@project = Project.find(params[:id])
  	@tasks = @project.tasks.order(:tag)

    @joined = false

    if !current_user.nil? && !current_user.projects.nil?
      @joined = current_user.projects.include?(@project)
    end

    @users = @project.users.order('created_at desc').first(10)

  end

  def list
    if !current_user.nil?
      @projects = current_user.projects
    end
  end

end

「app\controllers\task_controller.rb」ファイルを編集します。

記述変更　app\controllers\task_controller.rb
記述を大幅に変更しているのでコードをコピーしてファイルの内容を置き換えて下さい。

class TaskController < ApplicationController
	before_action :authenticate_user!

  def show
  	project = Project.find(params[:project_id])
  	@tasks = project.tasks.order(:tag)

  	joined = false

  	if !current_user.nil? && !current_user.projects.nil?
  		joined = current_user.projects.include?(project)
  	end

  	if joined

	  	@task = @tasks.find(params[:id])

	  	@next_task = @task.next
	  	@prev_task = @task.prev
	  else
	  	flash[:notice] = "プロジェクトを購入して下さい。"
	  	redirect_to project
	  end
  end
end

ルートを設定します。

記述追加　config\routes.rb
16行目に「post '/free' => 'charge#free'」の記述を追加しています。

Rails.application.routes.draw do

  devise_for :admin_users, ActiveAdmin::Devise.config
  ActiveAdmin.routes(self)
  
  devise_for :users, 
              path: '', 
              path_names: {sign_up: 'register', sign_in: 'login', edit: 'profile', sign_out: 'logout'},
              controllers: {omniauth_callbacks: 'omniauth_callbacks', registrations: 'registrations'}

  # ルートページをapp\views\pages\about.html.erbに設定
  root 'pages#about'  
  
  get 'pages/about'

  post '/free' => 'charge#free'

  resources :project do
    resources :task, only: [:show]
  end

  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end

ビューを編集します。

「app\views\project\show.html.erb」ファイルを編集します。

記述追加　app\views\project\show.html.erb（103～127行目）

<!-- サブスクリプション　-->
<% if !@joined %>

    <div class="center">
        <h1 class="tag is-success is-light is-large"><%= @project.price == 0? "無料" : "有料" %></h1>
    </div>
    <br/>
    <div class="card-action center">

            <%= form_tag free_path do %>
                <%= hidden_field_tag 'project_id', @project.id %>
                <button type="submit" class="button is-fullwidth is-danger">プロジェクトを購入する（<%= number_to_currency(@project.price) %>）</button>
            <% end %>
    </div>

<% else %>
    <div class="card-content center">
        <span class="tag is-success is-light is-large">購入済みです</span>
    </div>
    <div class="card-content center">
        <div class="card-content is-horizontal-center is-flex">
            <figure class="image is-256x256">
                <%= image_tag current_user.gravatar_url, class: "is-rounded" %><br/>
            </figure>
    </div>
    <h5><%= current_user.full_name %></h5>

    </div>
<% end %>

app\views\project\show.html.erb

<section class="section">
    <div class="container">
        <div class="columns">
        
            <!-- 左側 -->
            <div class="column is-two-thirds">
                <div class="columns is-multiline">
                    <!-- プロジェクト -->
                    <div class="column is-full">   
                        <div class="card">
                            <div class="card-content">
                                <div class="content">
                                    <h1 class="title"><%= @project.name %></h1>
                                    <div class="title is-4 has-text-right" style="color: black;"><%= number_to_currency(@project.price) %></div>
                                </div>
                                <hr>
                                <div class="hero-carousel" id="carousel-photo">
                                    <%= image_tag @project.image %>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="column">
                        <div class="card">
                            <div class="card-content">

                                <!-- コンテンツ -->
                                <div class="box">
                                    <article class="media">
                                        <div class="media-content">
                                            <div class="content">
                                                <h2 class="subtitle">このプランについて</h2>
                                                <hr>
                                                <%= @project.content %>
                                            </div>
                                        </div>
                                    </article>
                                </div>

                                <!-- タスク Section -->
                                <div class="box">
                                    <article class="media">
                                        <div class="media-content">
                                            <div class="content">
                                                <div class="collection">
                                                    <% @tasks.each do |task| %>
                                                        <% if task.header %>
                                                            <br/>
                                                            <div class="collection-item active">
                                                                <span class="tag is-link is-large"> <%= task.title %></span>
                                                                <span class="tag is-white is-large"> <%= task.note %></span>
                                                            </div>
                                                            <br/>
                                                        <% else %>
                                                            <div class="collection-item active">
                                                                &nbsp;&nbsp;&nbsp;&nbsp;<span class="tag is-light is-medium" style="margin: 3px;">
                                                                    <%= link_to [task.project, task], class: "collection-item", data: { turbolinks: false} do %>
                                                                        <%= task.title %>
                                                                    <% end %>                                                                
                                                                 </span>
                                                                
                                                            </div>                            
                                                        <% end %>
                                                    <% end %>
                                                </div>
                                            </div>
                                        </div>
                                    </article>
                                </div>
 
                            </div>
                        </div>                        
                    </div>
                </div>
            </div>

            <!-- 右側 -->
            <div class="column">
                <div class="columns is-multiline">

                    <!-- 購入 -->
                    <div class="column is-full">
                        <div class="card">
                            <div class="card-content">
                                <div class="media">
                                    <div class="media-content">
                                        <strong><%= @project.name %></strong>                                                                                                        
                                    </div>
                                    <div class="media-right">
                                        <p class="title is-4" style="color: black;"><%= number_to_currency(@project.price) %></p>
                                    </div>                                                
                                </div>
                                
                                <div class="content f-15">
                                    <p class="m-t-30"><%= @project.content %></p>
                                    <p class="m-t-30">
                                        <strong>タスク数: <i class="far fa-clock"></i> <%= @tasks.count %></strong>                                                    
                                    </p>
                                </div>
                                <% if user_signed_in? %>

                                    <!-- サブスクリプション　-->
                                    <% if !@joined %>
                                        <div class="center">
                                            <h1 class="tag is-success is-light is-large"><%= @project.price == 0? "無料" : "有料" %></h1>
                                        </div>
                                        <br/>
                                        <div class="card-action center">
                                                <%= form_tag free_path do %>
                                                    <%= hidden_field_tag 'project_id', @project.id %>
                                                    <button type="submit" class="button is-fullwidth is-danger">プロジェクトを購入する（<%= number_to_currency(@project.price) %>）</button>
                                                <% end %>
                                        </div>
                                    <% else %>
                                        <div class="card-content center">
                                            <span class="tag is-success is-light is-large">購入済みです</span>
                                        </div>
                                        <div class="card-content center">
                                            <div class="card-content is-horizontal-center is-flex">
                                                <figure class="image is-256x256">
                                                    <%= image_tag current_user.gravatar_url, class: "is-rounded" %><br/>
                                                </figure>
                                        </div>
                                        <h5><%= current_user.full_name %></h5>
                                        </div>
                                    <% end %>                                

                                <% else %>
                                    <button class="button is-fullwidth is-danger" disabled>ログインして下さい</button>  
                                <% end %>
                            </div>
                        </div>
                    </div>
                   
                </div>
            </div>
            
        </div>
    </div>
</section>