選択必須の選択肢を選んだら「選択した理由」の入力欄を表示するようにした #5920

AyakaTakashima · 2022-12-09T13:27:55Z

Issue

[アンケート]理由が必要な選択肢を選択したら、理由を入力する入力欄が表示されたい。 #5905

概要

アンケートのプレビュー画面（showページ）にて、「選択した理由」の回答が必須な選択肢を選んだ場合のみ、
追加の入力欄が現れるようにしました。

補足

アンケート機能自体が、完全な新機能なので補足させていただきます。
アンケート機能は、下記PRで実装しています。
関連PR： #5690

アンケート機能内で、質問を作成できる機能があります。
選択肢を選ぶ質問形式である時に、「選択した理由」の回答を必須にできるよう設定することができます。
質問を作成できる機能は、下記PRで実装されています。
関連PR： #5370

作成できる質問形式は全部で5つありますが、今回のPRで対象としている質問形式は下記の3つです。

ラジオボタン
チェックボックス
均等目盛

変更確認方法

feature/display-input-fields-of-reason-for-choice-only-when-answer-required-choice-choosedをローカルに取り込む
bin/rails sでローカルを立ち上げる
komagataでログイン（アンケート機能は管理者権限でないと入れないため）
下記にアクセス
http://localhost:3000/survey_questions
質問形式がラジオボタン、チェックボックス、均等メモリの質問の編集画面に入り、「選択した理由」の回答が必須の選択肢はどれかを確認する（「選択した理由」の回答が必須の選択肢がなかった場合は必須にする）
下記にアクセスし、表示されているいずれかのアンケートをクリックする
http://localhost:3000/surveys
「選択した理由」が必須の選択肢をクリックした時に、理由を入力する欄が動的に表示されるか確認する

変更前

ラジオボタン、チェックボックス、均等目盛、いずれも「選択した理由」の入力欄が常時表示されっぱなしでした。

変更後

ラジオボタン

チェックボックス

均等目盛

AyakaTakashima · 2022-12-18T08:45:58Z

@hikarook94
お疲れ様です！！
こちらのレビューをお願いしたいのですが可能でしょうか？🙇‍♀️
もし厳しそうでしたらほかの方にお声がけするのでおっしゃっていただければ幸いです😌

hikarook94 · 2022-12-18T12:09:56Z

@AyakaTakashima
お疲れ様です！レビュー依頼ありがとうございます！
明後日までにはお返しできるかと思います👍

AyakaTakashima · 2022-12-19T00:10:54Z

@hikarook94
お返事ありがとうございます！！
承知いたしました！！よろしくお願いいたします🙌

hikarook94

@AyakaTakashima
お疲れ様です！レビューしました！
動作確認はOKでした👍

コードについていくつかコメントさせていただいているのと、Bulletのエラーが画面に表示されておりN+1問題が発生しているかも？と思いました。

（アイコン？に隠れていてよく見えないですが...）
surveys_contorller.rbでsurvey_questionsを取得するときに一度にまとめて取得する必要があるかなと思います！違っていたらすみません！

以上、ご確認よろしくお願いします🙏

hikarook94 · 2022-12-20T08:46:14Z

app/javascript/survey.js

+          answerRequiredChoice.name
+        )
+        const checkBoxStatuses = []
+        choicesInSameQuestion.forEach((ChoiceInSameQuestion) => {


ChoiceInSameQuestionはキャメルケースのタイポ？だと思います！

hikarook94 · 2022-12-20T08:48:33Z

app/javascript/survey.js

+      if (answerRequiredChoice.checked) {
+        additionalQuestionField[0].classList.remove('is-hidden')
+      } else if (
+        !answerRequiredChoice.checked &&


!answerRequiredChoice.checkedはあえて明示しなくても良いかも？と思いました！

AyakaTakashima · 2022-12-20T13:27:00Z

@hikarook94
レビューありがとうございます！
時間がかかりそうなので修正完了しましたらまたご連絡させていただきます🙇‍♀️

AyakaTakashima · 2022-12-21T11:08:37Z

@hikarook94
お疲れ様です！
修正できましたのでご確認お願いいたします🙇‍♀️

左隅にある赤いWarningってクリックして中身開くことができるんですね...！
「Bullet Warning」で調べてみると、N+1問題を検出してくれるgemだということがわかりました。
勉強になりました😭ありがとうございます...！

上記のエラーはshowページで発生しておりましたので、#5690 の方で修正させていただきました🙇‍♀️
#5690 のPR（レビュー中）も私が担当しており、showページはそちらのPRで実装したためです。
本PRのブランチ（feature/display-input-fields-of-reason-for-choice-only-when-answer-required-choice-choosed）は、上記の別PRのブランチが分岐元となっているので、rebaseいたしました！
エラーは出なくなっていると思いますので、ご確認いただけますと幸いです。

他のご指摘いただいた点も修正させていただきました！
ご確認よろしくお願いいたします🙇‍♀️

hikarook94 · 2022-12-22T04:31:30Z

@AyakaTakashima
お疲れ様です！修正ありがとうございます！

左隅にある赤いWarningってクリックして中身開くことができるんですね...！

僕も「こんなのあったっけ？」って思いました😇
Bulletというgemの存在自体は知っていたのですが、実際にエラーに気づいたのは初めてでした！

N+1問題は別PRで修正とのこと、了解しました！
Approveさせていただきます！

AyakaTakashima · 2022-12-22T11:20:31Z

@hikarook94
そうだったんですね...！
気づいてくださり感謝です😭
approveありがとうございます！！

AyakaTakashima · 2022-12-22T11:21:34Z

@komagata
お疲れ様です！
hikarook94さんよりapproveいただきましたので、レビューお願いいたします！

komagata

conflictの解消をお願い致します〜。

AyakaTakashima · 2022-12-28T11:29:12Z

@komagata
コンフリクトの解消をいたしました。
ご確認お願いします！

komagata · 2022-12-29T22:59:28Z

app/javascript/survey.js

@@ -0,0 +1,52 @@
+document.addEventListener('DOMContentLoaded', () => {
+  const Choices = Array.from(document.querySelectorAll('.a-toggle-checkbox'))


他のページでjsのエラーが出ていないかどうか調べてみていだだけるとありがたいです〜

（.a-toggle-checkboxやjs-additional_question_${choice.name}存在しないページ）

AyakaTakashima · 2023-01-04T13:02:39Z

@komagata
お疲れ様です。
修正いたしましたのでご確認お願いいたします！

komagata

確認させて頂きました。OKです〜🙆‍♂️

AyakaTakashima · 2023-01-05T09:01:21Z

@komagata
ご確認ありがとうございます！！！！！
アンケート機能はまだ正式に実装されていないと思うので、リリースノートは書かないようにしたいと思います！

machida assigned AyakaTakashima Dec 13, 2022

AyakaTakashima force-pushed the feature/create_surveys branch 2 times, most recently from f1041e8 to 81a5b0a Compare December 18, 2022 06:46

AyakaTakashima force-pushed the feature/display-input-fields-of-reason-for-choice-only-when-answer-required-choice-choosed branch from 50632ab to 25cf769 Compare December 18, 2022 07:59

AyakaTakashima requested a review from hikarook94 December 18, 2022 08:44

AyakaTakashima marked this pull request as ready for review December 18, 2022 08:44

hikarook94 requested changes Dec 20, 2022

View reviewed changes

AyakaTakashima force-pushed the feature/create_surveys branch from 81a5b0a to 786d6c9 Compare December 20, 2022 14:00

AyakaTakashima force-pushed the feature/display-input-fields-of-reason-for-choice-only-when-answer-required-choice-choosed branch from ede4dfe to b9b4704 Compare December 21, 2022 10:52

hikarook94 approved these changes Dec 22, 2022

View reviewed changes

AyakaTakashima requested a review from komagata December 22, 2022 11:20

AyakaTakashima force-pushed the feature/create_surveys branch from 786d6c9 to 7fd71bc Compare December 26, 2022 13:24

komagata requested changes Dec 27, 2022

View reviewed changes

AyakaTakashima force-pushed the feature/display-input-fields-of-reason-for-choice-only-when-answer-required-choice-choosed branch from b9b4704 to 644180b Compare December 28, 2022 04:38

AyakaTakashima force-pushed the feature/create_surveys branch from 7fd71bc to 7f0eec5 Compare December 28, 2022 11:04

AyakaTakashima force-pushed the feature/display-input-fields-of-reason-for-choice-only-when-answer-required-choice-choosed branch from 644180b to 44cefa9 Compare December 28, 2022 11:06

komagata reviewed Dec 29, 2022

View reviewed changes

AyakaTakashima force-pushed the feature/create_surveys branch from c678478 to ff85030 Compare January 4, 2023 11:55

TakashimaAyaka added 3 commits January 4, 2023 20:57

選択必須の選択肢を選んだら「選択した理由」の入力欄を表示するようにした

26ee8fc

テストを追加

70ecc40

rubocopに対応

a77802a

TakashimaAyaka and others added 4 commits January 4, 2023 20:57

lintに対応

27d23cc

タイプミスを修正&if分岐中の不要な条件を削除

9156758

他のページで使われているクラス名を使用していたことにより発生していたエラーを解消

c1a240d

lintに通した

ee2aeae

AyakaTakashima force-pushed the feature/display-input-fields-of-reason-for-choice-only-when-answer-required-choice-choosed branch from f0c6b5a to ee2aeae Compare January 4, 2023 12:04

komagata approved these changes Jan 5, 2023

View reviewed changes

komagata merged commit 2300dbb into feature/create_surveys Jan 5, 2023

komagata deleted the feature/display-input-fields-of-reason-for-choice-only-when-answer-required-choice-choosed branch January 5, 2023 03:55

github-actions bot mentioned this pull request Jan 5, 2023

Release 2023-01-12 00:54:59 #5964

Merged

21 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

選択必須の選択肢を選んだら「選択した理由」の入力欄を表示するようにした #5920

選択必須の選択肢を選んだら「選択した理由」の入力欄を表示するようにした #5920

AyakaTakashima commented Dec 9, 2022 •

edited

Loading

AyakaTakashima commented Dec 18, 2022

hikarook94 commented Dec 18, 2022

AyakaTakashima commented Dec 19, 2022

hikarook94 left a comment

hikarook94 Dec 20, 2022

hikarook94 Dec 20, 2022

AyakaTakashima commented Dec 20, 2022 •

edited

Loading

AyakaTakashima commented Dec 21, 2022 •

edited

Loading

hikarook94 commented Dec 22, 2022

AyakaTakashima commented Dec 22, 2022

AyakaTakashima commented Dec 22, 2022

komagata left a comment

AyakaTakashima commented Dec 28, 2022

komagata Dec 29, 2022

AyakaTakashima commented Jan 4, 2023

komagata left a comment

AyakaTakashima commented Jan 5, 2023

		@@ -0,0 +1,52 @@
		document.addEventListener('DOMContentLoaded', () => {
		const Choices = Array.from(document.querySelectorAll('.a-toggle-checkbox'))

選択必須の選択肢を選んだら「選択した理由」の入力欄を表示するようにした #5920

選択必須の選択肢を選んだら「選択した理由」の入力欄を表示するようにした #5920

Conversation

AyakaTakashima commented Dec 9, 2022 • edited Loading

Issue

概要

補足

変更確認方法

変更前

変更後

AyakaTakashima commented Dec 18, 2022

hikarook94 commented Dec 18, 2022

AyakaTakashima commented Dec 19, 2022

hikarook94 left a comment

Choose a reason for hiding this comment

hikarook94 Dec 20, 2022

Choose a reason for hiding this comment

hikarook94 Dec 20, 2022

Choose a reason for hiding this comment

AyakaTakashima commented Dec 20, 2022 • edited Loading

AyakaTakashima commented Dec 21, 2022 • edited Loading

hikarook94 commented Dec 22, 2022

AyakaTakashima commented Dec 22, 2022

AyakaTakashima commented Dec 22, 2022

komagata left a comment

Choose a reason for hiding this comment

AyakaTakashima commented Dec 28, 2022

komagata Dec 29, 2022

Choose a reason for hiding this comment

AyakaTakashima commented Jan 4, 2023

komagata left a comment

Choose a reason for hiding this comment

AyakaTakashima commented Jan 5, 2023

AyakaTakashima commented Dec 9, 2022 •

edited

Loading

AyakaTakashima commented Dec 20, 2022 •

edited

Loading

AyakaTakashima commented Dec 21, 2022 •

edited

Loading