↓↓クリックして頂けると励みになります。
【31 | Orderの確認】 << 【ホーム】 >> 【33 | Offer】
クライアント（仕事を依頼する人）が自分から仕事をリクエストできるように実装します。
モデル
リクエストモデルを作成します。
コマンド
一文です。
rails g model Request description:text title budget:bigint delivery:bigint user:references category:references
コマンド マイグレーション適用
rails db:migrate
「app\models\request.rb」ファイルの記述を更新します。
記述更新 app\models\request.rb
class Request < ApplicationRecord belongs_to :user belongs_to :category has_one_attached :attachment_file validates :title, presence: { message: "空白にはできません" } validates :description, presence: { message: "空白にはできません" } validates :delivery, numericality: { only_integer: true, message: "数字でなければなりません" } end
「app\models\category.rb」ファイルに以下の記述を追加します。
記述追加 app\models\category.rb(4行目)
has_many :requests
app\models\category.rb
class Category < ApplicationRecord has_many :gigs has_many :requests end
「app\models\user.rb」ファイルに以下の記述を追加します。
記述追加 app\models\user.rb(4行目)
has_many :requests
app\models\user.rb
class User < ApplicationRecord has_many :gigs has_many :requests has_many :buying_orders, foreign_key: "buyer_id", class_name: "Order" has_many :selling_orders, foreign_key: "seller_id", class_name: "Order" has_one_attached :avatar validates :full_name, presence: true, length: {maximum: 50} # Include default devise modules. Others available are: # :confirmable, :lockable, :timeoutable, :trackable and :omniauthable devise :database_authenticatable, :registerable, :recoverable, :rememberable, :validatable, :confirmable, :omniauthable 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
コントローラー
リクエストコントローラを作成します。
コマンド
一文です。
rails g controller Requests index new create edit update show destroy list
「app\controllers\requests_controller.rb」ファイルを以下のように編集します。
記述編集 app\controllers\requests_controller.rb
class RequestsController < ApplicationController before_action :authenticate_user! before_action :set_request, except: [:new, :create, :index, :list] before_action :is_authorised, only: [:edit, :update, :destroy] before_action :set_categories, only: [:new, :edit, :list] def index @requests = current_user.requests end def new @request = current_user.requests.build end def create @request = current_user.requests.build(request_params) if @request.save redirect_to requests_path, notice: "保存しました" else redirect_to request.referrer, flash: {error: @request.errors.full_messages.join(', ')} end end def edit end def update if @request.update(request_params) redirect_to requests_path, notice: "保存しました" else redirect_to request.referrer, flash: {error: @request.errors.full_messages.join(', ')} end end def show end def destroy @request.destroy redirect_to requests_path, notice: "削除しました" end def list @category_id = params[:category] if @category_id.present? @requests = Request.where(category_id: @category_id) else @requests = Request.all end end private def set_categories @categories = Category.all end def set_request @request = Request.find(params[:id]) end def is_authorised redirect_to root_path, alert: "あなたに権限はありません。" unless current_user.id == @request.user_id end def request_params params.require(:request).permit(:description, :category_id, :delivery, :budget, :attachment_file, :title) end end
ルート設定
ルートの設定をします。
自動で追加されたものはすべて削除します。
記述追加（２ヶ所） config\routes.rb
12行目に「get '/all_requests', to: 'requests#list'」の記述を追加。
27行目に「resources :requests」の記述追加
Rails.application.routes.draw do # ルートを app\views\pages\home.html.erb に設定 root 'pages#home' # get get 'pages/home' get '/dashboard', to: 'users#dashboard' get '/users/:id', to: 'users#show', as: 'user' get '/selling_orders', to: 'orders#selling_orders' get '/buying_orders', to: 'orders#buying_orders' get '/all_requests', to: 'requests#list' # post post '/users/edit', to: 'users#update' put '/orders/:id/complete', to: 'orders#complete', as: 'complete_order' resources :gigs do member do delete :delete_photo post :upload_photo end resources :orders, only: [:create] end resources :requests # device devise_for :users, path: '', path_names: {sign_up: 'register', sign_in: 'login', edit: 'profile', sign_out: 'logout'}, controllers: {omniauth_callbacks: 'omniauth_callbacks', registrations: 'registrations'} # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html end
ビュー
「app\views\requests」フォルダにある「create.html.erb」「destroy.html.erb」「update.html.erb」の３ファイルは使用しないので削除して大丈夫です。
ビューを編集していきます。
記述編集 app\views\requests\new.html.erb
<div class="container mt-4 mb-4"> <div class="card"> <div class="card-body"> <div class="card-title font2"> リクエスト どんな仕事をお探しですか？ </div> <div> <%= form_for @request do |f| %> <div class="mt-4"> <label class="label">タイトル</label><span class="badge bg-danger">必須</span> <%= f.text_field :title, class: "form-control" %> </div> <div class="mt-4"> <label class="label">内容</label><span class="badge bg-danger">必須</span> <%= f.text_area :description, class: "form-control" %> </div> <div class="form-control mt-4"> <label class="label">カテゴリー選択</label> <div class="font2"> <%= f.select(:category_id, options_for_select(@categories.map { |c| [c.name, c.id] })) %> </div> </div> <div class="mt-4"> <label class="label">期日(日)</label> <%= f.number_field :delivery, placeholder: "1〜30", class: "form-control" %> </div> <div class="mt-4"> <label class="label">予算（円）</label> <%= f.number_field :budget, placeholder: "最低500円", class: "form-control" %> </div> <div class="mt-4"> <label class="label">ファイルのアップロード</label><span class="badge bg-primary">オプション</span> <div class="mt-2"> <%= f.file_field :attachment_file, class: "form-control" %> </div> </div> <div class="mt-4"> <%= f.submit 'リクエストする', class: "btn btn-danger w-100" %> </div> <% end %> </div> </div> </div> </div> <script> $(document).ready(function() { var file = $('.file-input'); file.change(function(e) { if (file[0].files.length > 0) { var attachment = file[0].files[0]; $('.file-name').text(attachment.name + " (" + attachment.size + " bytes)"); } }) }) </script>
ブラウザ確認
http://localhost:3000/requests/new
リクエストの登録ができます。
登録したリクエストを編集できるようビューを編集します。
記述編集 app\views\requests\edit.html.erb
<div class="container mt-4 mb-4"> <div class="card"> <div class="card-body"> <div class="card-title font2"> リクエスト内容更新 どんな仕事をお探しですか？ </div> <div> <%= form_for @request do |f| %> <div class="mt-4"> <label class="label">タイトル</label><span class="badge bg-danger">必須</span> <%= f.text_field :title, class: "form-control" %> </div> <div class="mt-4"> <label class="label">内容</label><span class="badge bg-danger">必須</span> <%= f.text_area :description, class: "form-control" %> </div> <div class="form-control mt-4"> <label class="label">カテゴリー選択</label> <div class="font2"> <%= f.select(:category_id, options_for_select(@categories.map { |c| [c.name, c.id] })) %> </div> </div> <div class="mt-4"> <label class="label">期日(日)</label> <%= f.number_field :delivery, placeholder: "1〜30", class: "form-control" %> </div> <div class="mt-4"> <label class="label">予算（円）</label> <%= f.number_field :budget, placeholder: "最低500円", class: "form-control" %> </div> <div class="mt-4"> <label class="label">ファイルのアップロード</label><span class="badge bg-primary">オプション</span> <div class="mt-2"> <%= f.file_field :attachment_file, class: "form-control" %> </div> <% if @request.attachment_file.attached? %> <div class="mt-2"> <%= link_to url_for(@request.attachment_file), class: "badge bg-success", download: "Attachment_#{@request.attachment_file.id}", style: "text-decoration: none;" do %> <i class="fas fa-paperclip fa-lg p-r-5"></i><span class="fs-6"><%= @request.attachment_file.filename %></span> <% end %> </div> <% end %> </div> <div class="mt-4"> <%= f.submit 'リクエスト内容を更新', class: "btn btn-danger w-100" %> </div> <% end %> </div> </div> </div> </div> <script> $(document).ready(function() { var file = $('.file-input'); file.change(function(e) { if (file[0].files.length > 0) { var attachment = file[0].files[0]; $('.file-name').text(attachment.name + " (" + attachment.size + " bytes)"); } }) }) </script>
ブラウザ確認
リクエストの編集ができます。
http://localhost:3000/requests/1/edit
クライアントが登録したリクエストを確認するページを作成します。
記述編集 app\views\requests\index.html.erb
<div class="container mt-4"> <div class="card"> <div class="card-body"> <h5 class="card-title text-danger h3 font1">リクエスト一覧（クライアント）</h5> <div class="mt-4"> <%= link_to '新しいリクエストを登録', new_request_path, class: "btn btn-primary"%> </div> <% if @requests.blank? %> <h5 class="font1">表示できるリクエストはありません。</h5> <% end %> <% @requests.each do |r| %> <div class="card mt-4"> <div class="card-body"> <div class="mt-2"> <%= link_to edit_request_path(r), style: "text-decoration: none;" do %> <span class="text-success"> <i class="far fa-edit fa-lg"></i>編集 </span> <% end %> <%= link_to r, method: :delete, data: {confirm: "削除してよろしいですか?"}, style: "text-decoration: none;" do %> <span class="text-danger"> <i class="far fa-trash-alt fa-lg"></i>削除 </span> <% end %> </div> <ul class="list-group mt-4"> <li class="list-group-item" style="border: none;"> <span class="font1">リクエスト日：</span><%= I18n.l(r.created_at, format: :full_date) %> </li> <li class="list-group-item" style="border: none;"> <span class="font1">リクエスト名：</span> <%= link_to r.title, request_path(r), class: "btn btn-light" %> </li> <li class="list-group-item" style="border: none;"> <span class="font1">期日：</span> <%= r.delivery %>日 </li> <li class="list-group-item" style="border: none;"> <span class="font1">価格：</span><%= number_to_currency(r.budget) %> </li> </ul> </div> </div> <% end %> </div> </div> </div>
表示を確認します。
ブラウザ確認
http://localhost:3000/requests
表示テストで利用するため、fakerを使ってリクエストを登録します。
「db\seeds.rb」ファイルの前回登録した部分（10行目から33行目まで）をコメントアウトします。
コメントアウトは範囲選択して「Command+/」で一気にできます。
その後、次の記述を追加してください。
記述追加 db\seeds.rb(33行目)
10.times do random_user = User.all.sample(1)[0] category = Category.all.sample(1)[0] request = Request.create( title: Faker::Job.title, description: Faker::Quote.matz, budget: Faker::Number.between(from: 500, to: 5000), delivery: Faker::Number.between(from: 1, to: 30), user_id: random_user.id, category_id: category.id ) end
db\seeds.rb
# This file should contain all the record creation needed to seed the database with its default values. # The data can then be loaded with the bin/rails db:seed command (or created alongside the database with db:setup). # # Examples: # # movies = Movie.create([{ name: 'Star Wars' }, { name: 'Lord of the Rings' }]) # Character.create(name: 'Luke', movie: movies.first) # テストカテゴリーを追加（10個） # 10.times do # Category.create( # name: Faker::Job.unique.field # ) # end # # テストユーザーを追加（5ユーザー パスワードは 123456） # 5.times do # user = User.create( # full_name: Faker::Name.name, # email: Faker::Internet.email, # about: Faker::Quote.matz, # password: '123456', # created_at: Date.today # ) # user.avatar.attach( # io: image = URI.open("https://i.pravatar.cc/300"), # filename: "avatar#{user.id}.jpg", # content_type: 'image/jpg' # ) # end 10.times do random_user = User.all.sample(1)[0] category = Category.all.sample(1)[0] request = Request.create( title: Faker::Job.title, description: Faker::Quote.matz, budget: Faker::Number.between(from: 500, to: 5000), delivery: Faker::Number.between(from: 1, to: 30), user_id: random_user.id, category_id: category.id ) end
コマンド
rails db:seed
Posticoでテーブルを確認します。
全てのリクエストを表示させるビューを作成します。
「app\views\requests\list.html.erb」ファイルを以下の内容に編集します。
記述編集 app\views\requests\list.html.erb
<div class="container mt-4"> <h4 class="font1"> 全てのリクエスト </h4> <div class="row"> <%= form_tag '', method: :get do %> <%= select_tag 'category', content_tag(:option, '全てのカテゴリー', value: "") + options_for_select(@categories.map { |c| [c.name, c.id] }, selected: @category_id), onchange: "this.form.submit();" %> <% end %> <% @requests.each do |r| %> <div class="col-md-4"> <div class="card mb-2"> <div class="card-body"> <ul class="list-group mt-4"> <li class="list-group-item" style="border: none;"> <span class="font1">リクエスト日：</span><%= I18n.l(r.created_at, format: :full_date) %> </li> <li class="list-group-item" style="border: none;"> <span class="font1">リクエスト名：</span> <%= link_to r.title, request_path(r), class: "btn btn-light" %> </li> <li class="list-group-item" style="border: none;"> <span class="font1">クライアント</span> <%= link_to user_path(r.user), class: "tootip", style: "text-decoration: none;" do %> <span class="btn btn-light"><%= r.user.full_name %></span> <% end %> </li> <li class="list-group-item" style="border: none;"> <span class="font1">期日：</span> <%= r.delivery %>日 </li> <li class="list-group-item" style="border: none;"> <span class="font1">価格：</span><%= number_to_currency(r.budget) %> </li> <% if r.attachment_file.attached? %> <div class="mt-2"> <%= link_to url_for(r.attachment_file), class: "badge bg-success", download: "Attachment_#{r.attachment_file.id}", style: "text-decoration: none;" do %> <i class="fas fa-paperclip fa-lg p-r-5"></i><span class="fs-6"><%= r.attachment_file.filename %></span> <% end %> </div> <% end %> </ul> </div> </div> </div> <% end %> </div> </div>
ブラウザ確認
http://localhost:3000/all_requests
カテゴリー検索もできます。
リクエストの詳細ページを実装します。
「app\views\requests\show.html.erb」ファイルを以下の内容に編集します。
記述編集 app\views\requests\show.html.erb
<div class="container mt-4"> <div class="card"> <div class="card-body"> <!-- タイトル --> <div class="card-title"> <h3 class="font1"><%= @request.title %></h3> <div class="mt-4"> <div class="mt-4"> <span class="font1">期日:</span><%= @request.delivery %>日 | <span class="font1">申し込み:</span> 0 | <span class="font1">予算:</span> <%= number_to_currency(@request.budget) %> </div> </div> <!-- 内容 --> <div class="card"> <div class="card-body"> <div> <span class="font1">カテゴリー：</span><%= @request.category.name %> </div> <div> <span class="font1">リクエスト日:</span><%= I18n.l(@request.created_at, format: :full_date) %> </div> <h6 class="font1 mt-4">クライアント</h6> <div class="mt-2"> <%= link_to user_path(@request.user), style: "text-decoration:none;" do %> <%= image_tag avatar_url(@request.user), class: "bd-placeholder-img figure-img img-fluid rounded-pill", style: "width: 80px;" %> <span class="font2 text-dark h4"><%= @request.user.full_name %></span> <% end %> </div> <div class="card-title mt-4"><h4 class="font1">内容</strong></h4> <div class="mt-4"> <span class="font2"><%= @request.description %></span> </div> <% if @request.attachment_file.attached? %> <div class="mt-4 mb-4"> <%= link_to url_for(@request.attachment_file), class: "badge bg-success", download: "Attachment_#{@request.attachment_file.id}", style: "text-decoration: none;" do %> <i class="fas fa-paperclip fa-lg p-r-5"></i><span class="fs-6"><%= @request.attachment_file.filename %></span> <% end %> </div> <% end %> </div> </div> </div> </div> </div> </div> </div>
ブラウザを確認します。
ブラウザ確認
http://localhost:3000/requests/1
ダッシュボードに登録したリクエストを表示させます。
「app/views/users/dashboard.html.erb」ファイルに以下の記述を追加します。
<!-- 登録リクエスト --> <div class="card mt-2"> <div class="card-body"> <h5 class="card-title">登録しているリクエスト</h5> <div class="row"> <% current_user.requests.each do |r| %> <div class="col-md-4"> <div class="card mb-2"> <div class="card-body"> <ul class="list-group mt-4"> <li class="list-group-item" style="border: none;"> <span class="font1">リクエスト日：</span><%= I18n.l(r.created_at, format: :full_date) %> </li> <li class="list-group-item" style="border: none;"> <span class="font1">リクエスト名：</span> <%= link_to r.title, request_path(r), class: "btn btn-light" %> </li> <li class="list-group-item" style="border: none;"> <span class="font1">期日：</span> <%= r.delivery %>日 </li> <li class="list-group-item" style="border: none;"> <span class="font1">価格：</span><%= number_to_currency(r.budget) %> </li> <% if r.attachment_file.attached? %> <div class="mt-2"> <%= link_to url_for(r.attachment_file), class: "badge bg-success", download: "Attachment_#{r.attachment_file.id}", style: "text-decoration: none;" do %> <i class="fas fa-paperclip fa-lg p-r-5"></i><span class="fs-6"><%= r.attachment_file.filename %></span> <% end %> </div> <% end %> <li class="list-group-item mt-4" style="border: none;"> <%= link_to edit_request_path(r), class: "btn btn-outline-primary w-100 mb-4" do %> 登録内容編集 <% end %> </li> </ul> </div> </div> </div> <% end %> </div> </div> </div>
記述編集 【app/views/users/dashboard.html.erb】119行目
<div class="container mt-4 mb-4"> <div class="row"> <!-- 左側 --> <div class="col-md-4"> <div class="card"> <div class="card-body"> <!-- アバター --> <%= image_tag avatar_url(current_user), class: "img-fluid img-thumbnail rounded-pill" %> <h4 style="margin-left: 5.5rem;"><%= current_user.full_name %></h4> <!-- 画像アップロードボタン --> <button class="btn btn-dark text-light w-100" type="button" data-bs-toggle="collapse" data-bs-target="#collapse1" aria-expanded="false" aria-controls="collapse1"> <i class="fa-solid fa-cloud-arrow-up"></i>アバター画像アップロード </button> <div class="collapse" id="collapse1"> <div class="card card-body"> <%= form_for :user, url: users_edit_url(current_user), action: :update, method: :post do |f| %> <%= f.file_field :avatar, class: "input-group-text", onchange: "this.form.submit();" %> <% end %> </div> </div> <hr/> 登録：<%= I18n.l(current_user.created_at, format: :full_date) %> <hr/> <div type="button" data-bs-toggle="collapse" data-bs-target="#collapse2" aria-expanded="false" aria-controls="collapse2"> <% if current_user.status %> <span class="btn btn-success"><i class="toggle far fa-edit"></i>オンライン</span> <% else %> <span class="btn btn-secondary"><i class="toggle far fa-edit"></i>オフライン</span> <% end %> </div> <div class="collapse" id="collapse2"> <div class="card card-body"> <%= form_for :user, url: users_edit_url(current_user), action: :update, method: :post do |f| %> <%= f.select(:status, options_for_select([["オンライン", true], ["オフライン", false]]), {}, {class: "custom-select"}) %> <%= f.submit "保存", class: "btn btn-dark" %> <% end %> </div> </div> <hr/> <div class="h5"><%= current_user.about %></div> <button class="btn btn-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#collapse3" aria-expanded="false" aria-controls="collapse3"> 自己紹介編集 </button> <div class="collapse" id="collapse3"> <div class="card card-body"> <%= form_for :user, url: users_edit_url(current_user), action: :update, method: :post do |f| %> <div><%= f.text_area :about, autofocus: true, autocomplete: 'form'%></div> <%= f.submit "保存", class: "btn btn-dark" %> <% end %> </div> </div> <hr /> <!-- 電話番号 --> <div> <% if !current_user.phone_number.blank? %> <span class="pull-right icon-babu"><i class="far fa-check-circle" style="color:green;"></i></span> 電話番号 <% else %> <div class="text-danger">電話番号が登録されていません</div> <%= link_to "電話番号登録", edit_user_registration_path, class: "btn btn-danger" %> <% end %> </div> </div> </div> </div> <!-- 右側 --> <div class="col-md-8"> <!-- お知らせ --> <div class="card"> <div class="card-body"> <h5 class="card-title">お知らせ</h5> <h6 class="card-subtitle mb-2 text-body-secondary"> </h6> <p class="card-text"> </p> </div> </div> <!-- 登録している仕事 --> <div class="card mt-2"> <div class="card-body"> <h5 class="card-title">登録している仕事</h5> <div class="row"> <% current_user.gigs.each do |gig| %> <% if gig.active? %> <div class="col-md-4"> <div class="card mb-2"> <%= link_to gig_path(gig), data: { turbolinks: false} do %> <%= image_tag gig_cover(gig), style: "width: 100%;", class: "card-img-top" %> <% end %> <div class="card-body"> <%= link_to gig_path(gig), data: { turbolinks: false} do %> <h5 class="card-title"> <span class="btn btn-light"><%= gig.title %></span> </h5> <% end %> <div class="card-text" style="margin-left: 0.5rem;"> <p><%= gig.summary %></p> <%= link_to edit_gig_path(gig), class: "btn btn-outline-primary w-100 mb-4" do %> 登録内容編集 <% end %> </div> </div> </div> </div> <% end %> <% end %> </div> </div> </div> <!-- 登録リクエスト --> <div class="card mt-2"> <div class="card-body"> <h5 class="card-title">登録しているリクエスト</h5> <div class="row"> <% current_user.requests.each do |r| %> <div class="col-md-4"> <div class="card mb-2"> <div class="card-body"> <ul class="list-group mt-4"> <li class="list-group-item" style="border: none;"> <span class="font1">リクエスト日：</span><%= I18n.l(r.created_at, format: :full_date) %> </li> <li class="list-group-item" style="border: none;"> <span class="font1">リクエスト名：</span> <%= link_to r.title, request_path(r), class: "btn btn-light" %> </li> <li class="list-group-item" style="border: none;"> <span class="font1">期日：</span> <%= r.delivery %>日 </li> <li class="list-group-item" style="border: none;"> <span class="font1">価格：</span><%= number_to_currency(r.budget) %> </li> <% if r.attachment_file.attached? %> <div class="mt-2"> <%= link_to url_for(r.attachment_file), class: "badge bg-success", download: "Attachment_#{r.attachment_file.id}", style: "text-decoration: none;" do %> <i class="fas fa-paperclip fa-lg p-r-5"></i><span class="fs-6"><%= r.attachment_file.filename %></span> <% end %> </div> <% end %> <li class="list-group-item mt-4" style="border: none;"> <%= link_to edit_request_path(r), class: "btn btn-outline-primary w-100 mb-4" do %> 登録内容編集 <% end %> </li> </ul> </div> </div> </div> <% end %> </div> </div> </div> </div> </div> </div>
ブラウザを確認します。
ブラウザ確認
http://localhost:3000/dashboard
ユーザ詳細ページに登録リクエストを追加します。
「app/views/users/show.html.erb」ファイルに以下の記述を追加します。
<!-- 登録リクエスト --> <div class="card mt-2"> <div class="card-body"> <h5 class="card-title font1"><%= @user.full_name %>さんが登録しているリクエスト</h5> <div class="row"> <% @user.requests.each do |r| %> <div class="col-md-4"> <div class="card mb-2"> <div class="card-body"> <ul class="list-group mt-4"> <li class="list-group-item" style="border: none;"> <span class="font1">リクエスト日：</span><%= I18n.l(r.created_at, format: :full_date) %> </li> <li class="list-group-item" style="border: none;"> <span class="font1">リクエスト名：</span> <%= link_to r.title, request_path(r), class: "btn btn-light" %> </li> <li class="list-group-item" style="border: none;"> <span class="font1">期日：</span> <%= r.delivery %>日 </li> <li class="list-group-item" style="border: none;"> <span class="font1">価格：</span><%= number_to_currency(r.budget) %> </li> <% if r.attachment_file.attached? %> <div class="mt-2"> <%= link_to url_for(r.attachment_file), class: "badge bg-success", download: "Attachment_#{r.attachment_file.id}", style: "text-decoration: none;" do %> <i class="fas fa-paperclip fa-lg p-r-5"></i><span class="fs-6"><%= r.attachment_file.filename %></span> <% end %> </div> <% end %> </ul> </div> </div> </div> <% end %> </div> </div>
記述追加 【app/views/users/show.html.erb】74行目
<div class="container mt-4 mb-4"> <div class="row"> <!-- 左側 --> <div class="col-md-4 mb-4"> <div class="card"> <div class="card-body"> <!-- ステータス --> <div> <% if @user.status %> <span class="badge bg-success"><i class="fa-regular fa-bell"></i>オンライン</span> <% else %> <span class="btn btn-secondary"><i class="fa-regular fa-bell-slash"></i>オフライン</span> <% end %> </div> <!-- アバター --> <%= image_tag avatar_url(@user), class: "img-fluid img-thumbnail rounded-pill" %> <h4 class="text-center"><%= @user.full_name %></h4> <!-- 自己紹介 --> <div class="h5 text-center"><%= @user.about %></div> </div> </div> </div> <!-- 右側 --> <div class="col-md-8"> <!-- レビュー --> <div class="card mb-2"> <div class="card-body"> <h5 class="card-title"><%= @user.full_name %>さんへのレビュー</h5> <h6 class="card-subtitle mb-2 text-body-secondary"> </h6> <p class="card-text"> </p> </div> </div> <!-- 登録している仕事 --> <div class="card mb-2"> <div class="card-body"> <h5 class="card-title font1"><%= @user.full_name %>さんが登録している仕事</h5> <div class="row"> <% @user.gigs.each do |gig| %> <% if gig.active? %> <div class="col-md-4"> <div class="card mb-2"> <%= link_to gig_path(gig), data: { turbolinks: false} do %> <%= image_tag gig_cover(gig), style: "width: 100%;", class: "card-img-top" %> <% end %> <div class="card-body"> <%= link_to gig_path(gig), data: { turbolinks: false} do %> <h5 class="card-title"> <span class="btn btn-light"><%= gig.title %></span> </h5> <div class="badge bg-primary"> <% if gig.has_single_pricing%> シングルプランのみ <% else %> 3プラン <% end %> </div> <% end %> </div> </div> </div> <% end %> <% end %> </div> </div> </div> <!-- 登録リクエスト --> <div class="card mt-2"> <div class="card-body"> <h5 class="card-title font1"><%= @user.full_name %>さんが登録しているリクエスト</h5> <div class="row"> <% @user.requests.each do |r| %> <div class="col-md-4"> <div class="card mb-2"> <div class="card-body"> <ul class="list-group mt-4"> <li class="list-group-item" style="border: none;"> <span class="font1">リクエスト日：</span><%= I18n.l(r.created_at, format: :full_date) %> </li> <li class="list-group-item" style="border: none;"> <span class="font1">リクエスト名：</span> <%= link_to r.title, request_path(r), class: "btn btn-light" %> </li> <li class="list-group-item" style="border: none;"> <span class="font1">期日：</span> <%= r.delivery %>日 </li> <li class="list-group-item" style="border: none;"> <span class="font1">価格：</span><%= number_to_currency(r.budget) %> </li> <% if r.attachment_file.attached? %> <div class="mt-2"> <%= link_to url_for(r.attachment_file), class: "badge bg-success", download: "Attachment_#{r.attachment_file.id}", style: "text-decoration: none;" do %> <i class="fas fa-paperclip fa-lg p-r-5"></i><span class="fs-6"><%= r.attachment_file.filename %></span> <% end %> </div> <% end %> </ul> </div> </div> </div> <% end %> </div> </div> </div> </div> </div>
表示を確認します。
ブラウザ確認
http://localhost:3000/users/2
ナビゲーションバーにリンクを追加します。
記述追加 app\views\shared\_navbar.html.erb
35,41,42行目にリンクを追加しています。
<li><%= link_to "リクエスト", all_requests_path, class: "dropdown-item btn btn-light" %></li> <li><%= link_to "リクエスト登録", new_request_path, class: "dropdown-item btn btn-light" %></li> <li><%= link_to "リクエスト確認", requests_path, class: "dropdown-item btn btn-light" %></li>
<nav class="navbar navbar-expand-lg bg-body-tertiary"> <div class="container-fluid"> <a class="navbar-brand" href="/"><span class="font1">Gig Hub</span></a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <!-- もしログインしていなかったら--> <% if (!user_signed_in?) %> <li class="nav-item" style="margin-bottom: 0.1rem;"> <span style="margin-left: 1rem;"> <%= link_to "新規登録", new_user_registration_path, class: "btn btn-danger" %> </span> </li> <li class="nav-item"> <span style="margin-left: 1rem;"> <%= link_to "ログイン", new_user_session_path, class: "btn btn-success text-light" %> </span> </li> </ul> <!-- ログインしていたら --> <% else %> <ul class="navbar-nav" style="margin-left: 2rem;"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> <figure style="position:relative; top: 0.2rem;" class="avatar <%= current_user.status ? "online" : "offline" %>"></figure> <%= image_tag avatar_url(current_user), class: "bd-placeholder-img figure-img img-fluid rounded-pill", style: "width: 40px; height: 30px;" %> <%= current_user.full_name %> </a> <ul class="dropdown-menu"> <li><%= link_to "ダッシュボード", dashboard_path, class: "dropdown-item btn btn-lightt" %></li> <li><%= link_to "ユーザ登録情報編集", edit_user_registration_path, class: "dropdown-item btn btn-light" %></li> <li><%= link_to "リクエスト", all_requests_path, class: "dropdown-item btn btn-light" %></li> <li><hr class="dropdown-divider"><span class="badge bg-danger" style="margin-left: 1rem;">フリーランサー</span></li> <li><%= link_to "仕事を新規登録", new_gig_path, class: "dropdown-item btn btn-light" %></li> <li><%= link_to "仕事確認", selling_orders_path, class: "dropdown-item btn btn-light" %></li> <li><hr class="dropdown-divider"><span class="badge bg-primary" style="margin-left: 1rem;">クライアント</span></li> <li><%= link_to "依頼確認", buying_orders_path, class: "dropdown-item btn btn-light" %></li> <li><%= link_to "リクエスト登録", new_request_path, class: "dropdown-item btn btn-light" %></li> <li><%= link_to "リクエスト確認", requests_path, class: "dropdown-item btn btn-light" %></li> <li><hr class="dropdown-divider"></li> <li><%= link_to "ログアウト", destroy_user_session_path, method: :delete, class: "dropdown-item btn btn-light" %></li> </ul> </li> </ul> <% end %> </div> </div> </nav>
【31 | Orderの確認】 << 【ホーム】 >> 【33 | Offer】
↓↓クリックして頂けると励みになります。
