草野球の出欠確認Webアプリを作ろう！　part.6 #Ruby

これから作っていく簡単なWebアプリの作成メモ（自分の備忘）です。
自分用なのであまり凝りすぎないように書いていきたい。

※前回導入していたRspecですが、なぜかchromedriverが動作しなくて原因も不明だったので、いったんTDDは凍結とします（そのままずっと凍結の可能性も...）。

今回やったこと

スケジュールの編集

schedulesコントローラーのeditとupdateのアクションを整える。

app/controllers/schedules_controller.rb

def edit
  @schedules = Schedule.find(params[:id])
end

def update
  @schedules = Schedule.find(params[:id])
  if @schedules.update(schedules_params)
    redirect_to schedule_path(@schedules), notice: "予定を編集しました。"
  else
    render :edit
  end
end

viewのほうも整える。

views/schedules/edit.html.erb

<h1>予定の編集</h1>
<div class="row_line">
  <%= link_to '予定一覧へ', schedules_path, class: 'btn primary-btn' %>
</div>

<%= form_for @schedules, url: {action: "update", id: @schedules.id} do |f| %>
  <div class="row_line">
    <label>件名：</label>
    <%= f.text_field :title %>
  </div>
  <div class="row_line">
    <label>予定の日付：</label>
    <%= raw sprintf( f.date_select(:date_of, 
                                    use_month_numbers: true,
                                    order:             [:year,:month,:day],
                                    selected:          Time.zone.now,
                                    start_year:        Time.zone.now.year + 5,
                                    end_year:          Time.zone.now.year,
                                    date_separator:    '%s'
                                  ),'年','月') + '日'
                                %>
  </div>
  <div class="row_line">
    <label>開始時間：</label>
    <%= f.time_select :start_time %>
    &nbsp;～&nbsp;
    <label>終了時間：</label>
    <%= f.time_select :end_time %>
    &nbsp;（
    <label>集合時間：</label>
    <%= f.time_select :meeting_time %>
    ）
  </div>

  <div class="row_line">
    <%= f.submit "保存する" %>
  </div>
<% end %>

スケジュールの編集画面に遷移できないと動作確認できないので、遷移できるようにしておく。
以下の記事を参考にした。
【jQuery】HTMLのtableの行にリンクを設定する
 Rails6でjQueryの導入方法

$ yarn add jquery

config/webpacker/environment.js

const { environment } = require('@rails/webpacker')

const webpack = require('webpack')
environment.plugins.prepend('Provide',
    new webpack.ProvidePlugin({
        $: 'jquery/src/jquery',
        jQuery: 'jquery/src/jquery'
    })
)

module.exports = environment

app/javascript/packs/application.js

（略）
import "jquery"
（略）

※jqueryを導入した際にrailsサーバーを起動中だったら、一度サーバーを停止して再度起動しなおすほうがよい（過去バージョンでの経験則）

jqueryを使えるようにした後は、そのjqueryを使用して一覧画面のテーブルの１行をクリックしたときに、編集画面に遷移するように準備する。

views/schedules/index.html.erb

（略）
<tbody>
  <% @schedules.each do |lst| %>
    <tr class="clickable-row" data-href="<%= edit_schedule_path lst.id %>">
      <td><%= lst.title %></td>
      <td><%= lst.date_of %></td>
      <td><%= lst.start_time.strftime('%H:%M') %> ～ <%= lst.end_time.strftime('%H:%M') %></td>
    </tr>
  <% end %>
</tbody>
（略）

以下のjsファイルを新規に作成した。

app/javascript/packs/schedules.js

$(function($) {
  $(".clickable-row").css("cursor","pointer").click(function() {
    location.href = $(this).data("href");
  });
});

作成したjsファイルを読み込むようにする。
（各モデルの名前付きのjsはもっと個別機能の処理を記述するほうが良いのではと思ったのは、ファイルを作成してからだった。今後余裕があればリファクタリングできるといいポイント。）

views/layouts/application.html.erb

（略）
<head>
    <title>YaQue</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'schedules', 'data-turbolinks-track': 'reload' %>
 </head>
（略）

↓テーブルの行をクリックすると以下のようになる。

Railsの5.2あたりとJqueryの導入方法がすこし違って戸惑った。
今回はここまで。

次回の記事>>

草野球の出欠確認Webアプリを作ろう！ part.6

今回やったこと

スケジュールの編集

草野球の出欠確認Webアプリを作ろう！　part.6