js-choices-single-selectを使っている箇所において、Railsで渡したデータの並び順がJavaScriptに渡っても保持されるようにした。

[Saki-htr]

関連issue

• js-choices-single-selectを使っている箇所において、Railsで渡したデータの並び順が、JSに渡された際に破壊されている #4746
  • ユーザー編集画面の所属企業にインクリメンタルサーチを使えるようにする #4385
  • 「新規質問作成フォームのプラクティス選択」と「日報一覧のプラクティスで絞り込む」をChoices.jsに置き換える。 #4637

概要

• js-choices-single-selectを使っている箇所において、Railsで渡したデータの並び順が、JavaScriptに渡された際に破壊されていた。
• Railsで渡したデータの並び順を維持するため、js-choices-single-selectの設定に、shouldSort: falseを追加した。

変更点

現在、js-choices-single-selectは、以下の3点で使用されている。
js-choices-single-select側で並び順が変更されないようにしたため、変更後はRails側で設定したデータの並び順になっている。

変更箇所	変更前の並び順	変更後の並び順
管理者でログイン時の、ユーザー情報変更ページの企業のセレクトボックス		app/helpers/companies_helper.rbのall_companies_with_emptyメソッドの並び順
日報一覧の「プラクティスで絞り込む」のセレクトボックス		並び順がcurrent_user.practices
Q&A作成のプラクティス選択のセレクトボックス		app/helpers/reports_helper.rbのpractice_optionsメソッドの並び順

動作確認の手順

1. bug/add-shouldSortブランチをローカルに持ってくる
2. bin/setupしてrails s
3. adminでログイン
4. 以下3つの動作確認を行う

1. 管理者でログイン時の、ユーザー情報変更ページの企業のセレクトボックス

1. 任意のユーザーのプロフィールページにアクセス
2. 「管理者として情報変更」をクリック
3. 企業のセレクトボックスの項目を確認
4. ターミナルでrails consoleを立ち上げて、Company.all.to_a.unshift(Company.new(name: '所属なし'))を実行する。
5. 「所属企業なし」〜「DAIMYO Engineer College」までの並び順が、アプリとターミナルの出力とで同じか確認する

2. 日報一覧の「プラクティスで絞り込む」のセレクトボックス

1. 日報一覧ページ(http://localhost:3000/reports)にアクセス
2. タブ「全て」をクリック
3. ターミナルでrails consoleを立ち上げて、User.find(ログインしたユーザーのid).practicesを実行
4. アプリのプラクティスで絞り込む」のセレクトボックスの並びと、ターミナルで出力されたプラクティスの並びが同じか確認する

3. Q&A作成のプラクティス選択のセレクトボックス

1. 左のサイドメニューの「Q&A」をクリック
2. 「＋質問する」をクリック
3. ターミナルでrails consoleを立ち上げて、以下を実行する

categories =
      Category
      .eager_load(:practices)
      .where.not(practices: { id: nil })
      .order('categories.position ASC, categories_practices.position ASC')

categories.flat_map do |category|
  category.practices.map do |practice|
    ["[#{category.name}] #{practice.title}", practice.id]
  end
end

4. アプリのプラクティス選択の並び順と、ターミナルで出力されたプラクティスの並び順が同じか確認する。

[Saki-htr]

@NorifumiOgawa さん
お疲れ様です!
以前、Choices.jsのissueを担当されていらっしゃったので、こちらのレビューをお願いしたいです🙏
もしレビュー依頼が集中している等でお忙しいようでしたら、他の方に依頼しますので、遠慮なく仰ってください~
よろしくお願いいたします🙇‍♀️

[NorifumiOgawa]

@Saki-htr さん、お疲れさまです。
ローカルでの動作確認と、コードの変更箇所を確認しました。
こちらLGTMとさせていただきます！

[Saki-htr]

@NorifumiOgawa さん
早速レビューしてくださって、ありがとうございました！

@komagata さん
チームメンバーのレビューを通りましたので、お手すきの際にレビューをお願いいたします。
よろしくお願いいたします🙏

[komagata]

修正ありがとうございます！

[Saki-htr]

@komagata @machida
お疲れ様です!
本番環境のDBへのアクセス権限を持ってないため、こちらのPRの動作確認をお願いさせていただいてもよろしいでしょうか?
お手すきの際にお願いいたします🙏

[komagata]

@Saki-htr 本番環境で動作することを確認しました。

[Saki-htr]

@komagata さん
ありがとうございます!
issueをcloseいたしました🙏