学生向けプログラミング入門 | 無料

学生向けにプログラミングを無料で解説。Java、C++、Ruby、PHP、データベース、Ruby on Rails, Python, Django

Rails6.1 | 仕事売買アプリ作成 | 31 | Orderの確認

↓↓クリックして頂けると励みになります。



30 | Order】 << 【ホーム】 >> 【32 | Request



フリーランサー(仕事をする・受ける人)とクライアント(仕事を頼む・お金を払う人)が注文の履歴を確認できるようにします。

コントローラー

まずはコントローラに記述を追加します。


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


記述追加 app\controllers\orders_controller.rb(25行目)

    def complete
        @order = Order.find(params[:id])

        if !@order.completed?
            if @order.completed!
                flash[:notice] = "保存しました"
            else
                flash[:notice] = "問題が発生しました"
            end
            redirect_to request.referrer
        end    
    end



app\controllers\orders_controller.rb

class OrdersController < ApplicationController
    before_action :authenticate_user!
    
    def create
        gig = Gig.find(params[:gig_id])
        pricing = gig.pricings.find_by(pricing_type: params[:pricing_type])

        if (pricing && !gig.has_single_pricing) || (pricing && pricing.basic? && gig.has_single_pricing)
            charge(gig, pricing)
        else
            flash[:alert] = "価格が間違っています。"
        end

        redirect_to request.referrer
    end

    def selling_orders
        @orders = current_user.selling_orders
    end

    def buying_orders
        @orders = current_user.buying_orders
    end

    def complete
        @order = Order.find(params[:id])

        if !@order.completed?
            if @order.completed!
                flash[:notice] = "保存しました"
            else
                flash[:notice] = "問題が発生しました"
            end
            redirect_to request.referrer
        end    
    end

    private
    def charge(gig, pricing)
        order = gig.orders.new
        order.due_date = Date.today() + pricing.delivery_time.days
        order.title = gig.title
        order.seller_name = gig.user.full_name
        order.seller_id = gig.user.id
        order.buyer_name = current_user.full_name
        order.buyer_id = current_user.id
        order.amount = pricing.price

        if order.save
            flash[:notice] = "発注しました。"
        else
            flash[:alert] = order.errors.full_messages.join(', ')
        end
    end
end


ルート設定


ルートの設定をします。


記述追加 config\routes.rb(10,11行目)

  get '/selling_orders', to: 'orders#selling_orders'
  get '/buying_orders', to: 'orders#buying_orders'



記述追加 config\routes.rb(19行目)

put '/orders/:id/complete', to: 'orders#complete', as: 'complete_order'



config\routes.rb
14,15行目、16行目に記述追加しています。

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'

  # 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

  # 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」フォルダに「orders」フォルダを新規作成して下さい。
作成した「orders」フォルダに「buying_orders.html.erb」ファイルと「selling_orders.html.erb」ファイルを新規作成します。



まずは仕事を依頼する側(クライアント)のオーダー確認ビューを実装します。
app\views\orders\buying_orders.html.erb(新規作成したファイル)

<div class="container mt-4">
    <div class="card">
        <div class="card-body">

            <h5 class="card-title text-danger h3 font1">依頼内容(クライアント)</h5>
            <% if @orders.blank? %>
                <h5 class="font1">表示できるオーダーはありません。</h5>
            <% end %>

            <% @orders.each do |o| %>
                <div class="card mt-4">
                    <div class="card-body">
                        <div class="mt-2">                                    
                            <% if o.inprogress? %>
                                <span class="font1 alert alert-danger text-center">進行中</span>
                                <%= link_to complete_order_path(o), method: :put, data: {confirm: "完了にしてもよろしいですか?"} do %>
                                    <i class="fa fa-thumbs-up fa-lg" style="color: green;"></i><span class="badge bg-success">完了</span>
                                <% end %>
                            <% else %>
                                <span class="font1 alert alert-success text-center">完了</span>
                            <% end %>
                        </div>
                        <ul class="list-group mt-4">

                            <li class="list-group-item" style="border: none;">
                                <span class="font1">依頼日:</span><%= I18n.l(o.created_at, format: :full_date) %>
                            </li>
                            <li class="list-group-item" style="border: none;">
                                <span class="font1">フリーランサー</span>                            
                                <%= link_to user_path(o.seller), class: "tootip", style: "text-decoration: none;" do %>
                                    <span class="btn btn-light"><%= o.seller_name %></span>
                                <% end %>                                                                     
                            </li>
                            <li class="list-group-item" style="border: none;">
                                <span class="font1">仕事名:</span>
                                <%= link_to o.title, gig_path(o.gig), class: "btn btn-light" %>
                            </li>
                            <li class="list-group-item" style="border: none;">
                                <span class="font1">期日:</span>   <%= I18n.l(o.due_date) %>                   
                            </li>
                            <li class="list-group-item" style="border: none;">
                                <span class="font1">価格:</span><%= number_to_currency(o.amount) %>
                            </li>                  
                        </ul>

                    </div>
                </div>
            <% end %>
        </div>
    </div>
</div>



ブラウザを確認します。
ステータスを進行中から完了に変更することができます。
http://localhost:3000/buying_orders

PCレイアウト
PCレイアウト


モバイルレイアウト
モバイルレイアウト



次に仕事を受けた側(フリーランサー)の確認画面を実装します。


app\views\orders\selling_orders.html.erb(新規作成したファイル)

<div class="container mt-4">
    <div class="card">
        <div class="card-body">

            <h5 class="card-title text-danger h3 font1">オーダー内容(フリーランサー)</h5>
            <% if @orders.blank? %>
                <h5 class="font1">表示できるオーダーはありません。</h5>
            <% end %>

            <% @orders.each do |o| %>
                <div class="card mt-4">
                    <div class="card-body">
                        <div class="mt-2">                                    
                            <% if o.inprogress? %>
                                <span class="font1 alert alert-danger text-center">進行中</span>
                            <% else %>
                                <span class="font1 alert alert-success text-center">完了</span>
                            <% end %>
                        </div>
                        <ul class="list-group mt-4">

                            <li class="list-group-item" style="border: none;">
                                <span class="font1">依頼日:</span><%= I18n.l(o.created_at, format: :full_date) %>
                            </li>
                            <li class="list-group-item" style="border: none;">
                                <span class="font1">クライアント</span>                            
                                <%= link_to user_path(o.buyer), class: "tootip", style: "text-decoration: none;" do %>
                                    <span class="btn btn-light"><%= o.buyer_name %></span>
                                <% end %>                                                                     
                            </li>
                            <li class="list-group-item" style="border: none;">
                                <span class="font1">仕事名:</span>
                                <%= link_to o.title, gig_path(o.gig), class: "btn btn-light" %>
                            </li>
                            <li class="list-group-item" style="border: none;">
                                <span class="font1">期日:</span>   <%= I18n.l(o.due_date) %>                   
                            </li>
                            <li class="list-group-item" style="border: none;">
                                <span class="font1">価格:</span><%= number_to_currency(o.amount) %>
                            </li>                  
                        </ul>

                    </div>
                </div>
            <% end %>
        </div>
    </div>
</div>



フリーランサー側はステータスを変更することはできません。
ブラウザ確認
http://localhost:3000/selling_orders

PCレイアウト
PCレイアウト


モバイルレイアウト
モバイルレイアウト



ナビゲーションバーにリンクを追加します。


記述追加 app\views\shared\_navbar.html.erb
37行目と39行目に以下のリンクを追加しています。

<li><%= link_to  "仕事確認", selling_orders_path, class: "dropdown-item btn btn-light" %></li>
<li><%= link_to  "依頼確認", buying_orders_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><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><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>


リンク追加
リンク追加

30 | Order】 << 【ホーム】 >> 【32 | Request


↓↓クリックして頂けると励みになります。

YAE C5 CLINIC(札幌美容クリニック)

関連記事(外部サイト)