プラクティスの並び替えができない。

[Saki-htr]

概要

管理者でログイン時、プラクティス一覧ページで、プラクティスの並び替えができなくなっている。

再現手順

1. 管理者でログイン
2. プラクティス一覧(courses/:id/practices)にアクセス
3. 「順番変更」をクリック
4. 任意のプラクティスを並び替える
5. 「変更完了」をクリック
6. 順番が変わっていない

スクリーンショット

期待される振る舞い

プラクティスの並び替えをできるようにしたい。

[github-actions[bot]]

このissue|PRは60日間更新がないため7日後にcloseします。closeしたくない場合はstaleラベルを外してください。

[github-actions[bot]]

このissue|PRは60日間更新がないため7日後にcloseします。closeしたくない場合はstaleラベルを外してください。

[github-actions[bot]]

このissue|PRは60日間更新がないため7日後にcloseします。closeしたくない場合はstaleラベルを外してください。

[fuwa-syugyo]

@komagata お疲れ様です！ こちら、私の環境で再現するのか試したのですが、ローカルおよびステージング環境でプラクティスの並び順を変更できました。 本番環境では発生していますでしょうか？

[komagata]

@fuwa-syugyo ちょっとデータを増やしたりして複雑な並び替えをして、その通りに並んでいるか調べてみてください。 その上で問題なければCloseしたいと思います〜。

（本番ですと全生徒に影響してしまいそうなので簡単に試すことができない状態です。）

[fuwa-syugyo]

@komagata データを増やしたりプラクティスのステータスを変えたりして試してみましたが、やはり再現しませんでした。

今年の3/21に並び替えで使用しているjsのライブラリのSortablejs( https://github.com/SortableJS/Sortable )のバージョンが上がったので、もしかしたらそれで修正されたのかもしれません。

[komagata]

@fuwa-syugyo かしこまりました。ではこちらのIssueは完了でOKです〜。

[fuwa-syugyo]

調査続行のためReopenします〜

[fuwa-syugyo]

@komagata お疲れ様です。 プラクティスの並び替えについて、現時点で考えていることを共有させていただきます。 質問もありますが確認をお願いできますでしょうか。

position.jsonが表示されない件について

並べ替えの操作を行うと画像のようにNetworkタブにposition.jsonが表示されます。 が、アクセスしようとするとルーティングエラーとなってしまいます。

api/categories_practicesにはupdateしか用意されておらず、getがないため表示できないのかな？と考えています。

config/routes/api.rb

    resources :categories_practices, only: %i() do
      resource :position, only: %i(update), controller: "categories_practices/position"
    end

以前はpracticeのpositionでプラクティスの並び順を制御していたようですが、こちらのissue( https://github.com/fjordllc/bootcamp/pull/5508 )でcategories_practicesのpositionを使うようになったようです。

プラクティスの順番を変える処理の流れについて

プラクティスの並び順を変える処理を調べていますが、わからない箇所があるのでヒント等いただきたいです。 処理の流れは以下のように考えています。

1. app/javascript/categories-practice.jsでparamsのinsert_atプロパティに挿入した場所が入る
2. patchでurl(/api/categories_practices/${id}/position.json)をfetchして、paramsをPATCHする
3. app/controllers/api/categories_practices/position_controller.rbのupdateメソッドで、動かしたプラクティスのCategoriesPracticesを見つける
4. insert_atを@categories_practicesのpositionに代入する
5. CategoriesPracticesのpositionの順番でプラクティスが並ぶ

4でinsert_atがなぜCategoriesPracticesのpositionに代入されるのかがわかりません。 あと、app/javascript/categories-practice.jsに記載がある/api/categories_practices/${id}/position.jsonを示すjbuilderのファイルも見つかっていません。

その他

以前は並び替え処理をvueで実装していたようで、駒形さんがsortablejsを使ったものに変更されていました。 https://github.com/fjordllc/bootcamp/pull/4890/files このissueに関わる箇所をかなり変更されていると思いますが、何か心当たり等ありますか…？ また、現時点でもやはりプラクティスの並び替えができないという現象は発生しておりませんが、もう少し調査を続ける必要はありますでしょうか？

質問が多く申し訳ございません。お手数ですがご確認をお願いいたします🙏

[komagata]

@fuwa-syugyo

4でinsert_atがなぜCategoriesPracticesのpositionに代入されるのかがわかりません。

何が疑問点なのかちょっと僕にとってわかりませんでした。 これはどういった意味でしょうか、もう少し説明いただければありがたいです〜。

[fuwa-syugyo]

@komagata 説明不足で申し訳ございません。。 app/controllers/api/categories_practices/position_controller.rbのBootcamp.patch(url, params)で並び順変更後の位置(params)が送信されていると思うのですが、それがなぜCategoriesPracticeのpositionカラムに代入されるのかがわからないということです。

app/controllers/api/categories_practices/position_controller.rb

import Sortable from 'sortablejs'
import Bootcamp from 'bootcamp'

document.addEventListener('DOMContentLoaded', () => {
  const elements = document.querySelectorAll('.js-admin-category-practice')
  if (!elements) {
    return null
  }

  elements.forEach((element) => {
    Sortable.create(element, {
      handle: '.js-grab',
      onEnd(event) {
        const id = event.item.dataset.categories_practice_id
        const params = { insert_at: event.newIndex + 1 }
        const url = `/api/categories_practices/${id}/position.json`

        Bootcamp.patch(url, params).catch((error) => {
          console.warn(error)
        })
        console.log(Bootcamp)
      }
    })
  })
})

byebugでデバッグしたところ、app/controllers/api/categories_practices/position_controller.rb のif @categories_practice.insert_at(params[:insert_at])の前後で@categories_practice.positionが変更されていたのですが、このif文でpositionが変わる流れがわかりません。 insert_atとposition がどうやって結びついているのかが理解できていないです。 (おそらく /api/categories_practices/${id}/position.jsonが何かしているのだと思いますが、jbuilderのファイルにそれらしき記述がないですし、アクセスしようとしてもルーティングエラーになってしまうので理解できていません。)

app/controllers/api/categories_practices/position_controller.rb

class API::CategoriesPractices::PositionController < API::BaseController
  def update
    @categories_practice = CategoriesPractice.find(params[:categories_practice_id])
    byebug
    if @categories_practice.insert_at(params[:insert_at])
      head :no_content
    else
      render json: @categories_practice.errors, status: :unprocessable_entity
    end
  end
end

[komagata]

@fuwa-syugyo insert_atの実装を見てみるのはいかがでしょうか？ 下記が参考になるかもしれません。

Rubyでメソッドの定義場所を見つける方法 - Qiita

[fuwa-syugyo]

@komagata insert_atはact_as_listというgemのメソッドでした。 https://github.com/brendon/acts_as_list/tree/ddbba24b9bff6993602859dcb8ec9f382bdbb8e9

        # Insert the item at the given position (defaults to the top position of 1).
        def insert_at(position = acts_as_list_top)
          insert_at_position(position)
        end

これでpositionカラムにinsert_atの引数が入っているのかなと思います。

position.jsonについてですがこちらのPR( https://github.com/fjordllc/bootcamp/pull/2264 )によると以下のようです。

JSON形式のパラメータは、送信先のコントローラ名に対応するモデル名でラップされる設定になっていますが、PositionControllerには対応するモデル（Positionモデル）がないため、ラップするキーをwrap_parametersで指定しています

/api/categories_practices/${id}/position.jsonがCategoriesPracticeのpositionカラムに対応していて、GETは指定されていないので表示はできないということになるのかな？と思います。

[komagata]

@fuwa-syugyo 了解です。必要であれば修正をお願いします。

[fuwa-syugyo]

@komagata 私としては並び替えができているのでこのままで問題ないのかな？と思います。 position.jsonがルーティングエラーになるのが気になっていましたが、getが定義されていないため仕様通りなのかなと。 強いていうならデフォルトスコープが使用されているのが気になりましたが実装者が意図して使っているようなのでそのままで良いかと思います。

[komagata]

@fuwa-syugyo エラーになっているのは問題だと思います。（不要であれば削除する必要があると思います。） 個別の仕様だけでなく、サイト全体としてどのようにするのがいいのかの視点で考えてみてください〜。

[fuwa-syugyo]

@komagata お疲れ様です！ ミーティングで共有させていただきましたが、position.jsonのエラーは特に問題ないということでした。 クローズさせていただければと思います。

[fuwa-syugyo]

@komagata closeいたしました〜！