yes/no で表現するのではなく「聞きたい順番」を決めて投票する

ichiroc commented 1 year ago

全てではなく、上位 1 - 3 までだけ登録する？

ykominami commented 1 year ago

実装方法を考えてみました。上位1-3を指定する場合は、4番目以降には「非選択」という選択肢が指定されているようにすれば、サーバ側でのバリデーションを工夫することで実現できると思います。 DBのVoteDetailテーブルではstatusはintegerであり、yes/yes_and_no/noはenumとしてのソースコードでの表現から来ているもので、statusの値とその値の意味は、柔軟に対応させることができるでしょう。例えば、1,2,3が聞きたい順番、4が非選択と対応付けということです。選択肢を4個のradio buttonで表現し、デフォルトを非選択として、サーバでのバリデーションでは、1, 2, 3がそれぞれ1個のみ存在し、その他は4であることをvalidとすることで実現できそうです。

JunichiIto commented 1 year ago

2023-4-13 Vol.13で議論した内容

UI

UIはドラッグアンドドロップ形式で聞きたい順番を選ぶ
ドラッグするたびにサブミットする
他の人が順位を変えると、テーブルの順位をもリアルタイムに入れ替わる（できたらアニメーションで）
モーダルを閉じるときは閉じるボタンで明示的に閉じる？

実装

ポイントをbroadcastする
stimulusでテーブル上の順位を入れ替える

参考

https://sortablejs.github.io/Sortable/

DBの変更

positionを保持する必要がありそう

スコア計算ルールは？

1位 = 3点
2位 = 2点
3位 = 1点
4位以下 = 0点
UI上は各人が選んだ1〜3位までを表示
合計スコアが同点だったら？→厳密に検討することもできるが、最初は口頭で決めるでいいのでは（運用でカバー）

要検討

デフォルトの順番をどうするか？
- 最初はランダムで並べるのがいいのでは

設計案

新規作成時に「ななしさん - 15号」のような名前を入れてデータをcreate（もしくは名前何かランダムで面白い名前に）
ドラッグアンドドロップでupdateするためのサブミット
名前やコメントはサブミットボタンクリック時にupdateする

新機能？

ChatGPTに追加で選択肢をsuggestさせる

ChatGPTに聞いてみた INPUT

モーダルのフォームってHotwireで楽にできる？できない？
turbo-nativeのコード読んでみたので紹介
TurboStreamで画面の複数箇所を更新する時のお作法ってどうするのがいいかな？

OUTPUT

HotwireとTurboの違いは何ですか？
Hotwireでエラーが発生した場合のデバッグ方法は？
Rails 7で導入される予定のコンポーネントAPIについて教えてください。

進め方

まずドラッグアンドドロップだけ
並び替えるたびにサブミット

JunichiIto commented 1 year ago

MEMO

選択肢はdraggableにしてみた
以下はこれからの実装案
1st step → DONE
- DBにpositionのカラム追加
  - gemで管理する？
- controller#craeteを修正
- 一覧のランキングロジックを修正
- formも常にposition順で並ぶように
1.5 step
- https://github.com/hotwire-love/touhyosan/issues/54
2nd step
- JSでイベントを拾ってsubmit
  - Hotwireで便利なsubmitメソッドがありそう
  - form elementを取得してrequestSubmitをStimulusから呼ぶ
  - https://developer.mozilla.org/ja/docs/Web/API/HTMLFormElement/requestSubmit
  - 新規作成時にソートすると常にcreateしてしまうバグがあるので直したい
- リアルタイムにランキングが変わる（broadcast）
3rd step
- 作成ボタンをクリックしたタイミングでcreateする
  - ~~削除ボタンも欲しくなりそう~~
  - 名前もランダムに
- 作成時にランダムに順序を付ける ←次回はここから！
- 見栄えをきれいに

ykominami commented 1 year ago

2023/5/25現在のUIのままですと、並び替え可能な選択肢が並んでいるというよりは、単に順序無しリストが表示されているだけに見えるので、「聞きたいと思う順に並び替えてください」などの説明文があったほうが良いのではないかと思います。また、視覚的にも選択肢をクリックした時とか、ドラッグ中の選択肢を太枠で囲むなど変化をつけると、並び替えできるという感覚が生まれやすいのではないでしょうか。

ruzia commented 1 year ago

そこらへんは3rd stepでやると良さそうですねー

JunichiIto commented 1 year ago

作成時にランダムに順序を付ける

↑これは新規フォームを開いた瞬間に投票データを作成する場合に必要な機能。

結局、ドラッグアンドドロップするまでデータは作成しない仕様になったので、この機能は不要。

見栄えをきれいに

結局、この1件だけになったので、別issueを立てました。 https://github.com/hotwire-love/touhyosan/issues/61

というわけでこのissueはcloseします。

hotwire-love / touhyosan

yes/no で表現するのではなく「聞きたい順番」を決めて投票する #36