[アンケート]アンケート編集で質問を並び替えられるようにする

[komagata]

管理者でログインをして http://localhost:3000/surveys/ にアクセス。

アンケート一覧があるので、どれか選んで編集をクリック。

編集画面にある、

この質問のリストをドラッグアンドドロップで並び替えられるようにしてほしい。

[AyakaTakashima]

@komagata お疲れ様です。 こちらのissueは、#4586 で作成したeditで質問を並び替えできるようにするという内容の認識で間違えありませんでしょうか？

[komagata]

@AyakaTakashima はい、そうなります〜

[machida]

:memo: https://github.com/fjordllc/bootcamp/pull/5690 こちらの Issue がマージされたら着手、もしくは、このPRからブランチを作る。

[machida]

並び替えの参考になるページ

管理者でログインして、

管理ページへ。

コースタブを開き、これをクリック。

このアイコンをドラッグアンドドロップすると並び順が変えられます。

[sadanora]

@komagata @machida おつかれさまです。

ドラッグアンドドロップ機能を実装するにあたり、以下どの方針が適当でしょうか？

1. Vueで実装する
2. Reactで実装する
3. Vanilla JSで実装する

machidaさんから並び替えの参考ページとして紹介いただいた、コースのプラクティス並び替え機能部分はVueで実装されていると思います。素直に同じように実装するなら、このissue内でアンケートの質問リストをVue化することになるのかな？と思いました。 ただ現状bootcampアプリはVueからReactへ移行の最中だと思いますので確認させてください。 そもそも的外れな質問してるようであればご指摘お願いいたします:bow:

[komagata]

@sadanora

2, 1, 3の順番で望ましいですが、Reactを一から勉強するのは大変なのでその場合は1でも大丈夫です〜

[sadanora]

@komagata ご回答ありがとうございます！

ちょうどいま自作サービスの技術検証の一環でReactを学習中でした。 Reactでの実装が手に負えなそうならVueに切り替えることも頭に入れつつ、一旦Reactでチャレンジしてみたいと思います〜

[sadanora]

@komagata
こちらReactの実装にチャレンジしていましたが、結果的にVanilla JS(SortableJS)で実装したので報告です。

cocoonやchoicesjsなどのライブラリやRailsの機能をしっかり使っているフォームをReact化するのが今の自分には難しすぎたというのが理由ですが、いくつかReactでのdnd実装方法を調べたところ[^anchor]、dndのロジックは結構自前で書く必要があって複雑になりそうだなというのもありReactでの実装は諦めました。

また、コースのカテゴリ並び替えはVue(vuedraggable)で実装されていると思っていましたが#4890 でvuedraggableからSortableJSに移行した経緯を知ったので、このissueでもSortableJSを使った実装としました。

[^anchor]:同時編集可能なドラッグアンドドロップによる並び替えを実装する | Wantedly Engineer Blogなど

[sadanora]

@komagata @machida 当issueの機能が本日リリースされましたが、動作確認にメンター以上の権限が必要になるためお手数ですが本番での動作確認をお願いいたします:pray:

確認手順

1. メンターまたは管理者権限をもつアカウントでログイン
2. アンケートの質問並び替え画面(/surveys/:id/survey_questions)でドラッグ&ドロップで質問が並び替えられることを確認する
3. アンケート画面(/surveys/:id/)に並び替えた質問の順番が反映されていることを確認する

[machida]

@sadanora 本番で確認できましたー🙆‍♂️ 対応ありがとうございます！！