[アンケート機能]アンケート用の質問の一覧、作成、編集ができるようにしたい

app/assets/stylesheets/application/blocks/admin/_admin-table.sass

@@ -22,7 +22,7 @@
   +border(horizontal, solid 1px $background-semi-shade)
 
 .admin-table-item__title
-  +text-block(1.5rem 1.45, $side)
+  +text-block(1.5rem 1.45, $default-text)
 
 .admin-table__label
   +text-block(.75rem 1.4, $main center 600)

app/assets/stylesheets/application/blocks/form/_checkboxes.sass

@@ -7,7 +7,7 @@ $checkbox-size: .875rem
 
 .checkboxes__item
   label
-    +text-block(.9375rem 1.4, block $semi-muted-text)
+    +text-block(.875rem 1.4, block $semi-muted-text)
     +position(relative)
     +hover-link
     cursor: pointer

app/assets/stylesheets/application/blocks/form/_form-added-choice.sass

@@ -0,0 +1,35 @@
+.form-added-choice
+  .form-added-choice + &
+    margin-top: 1rem
+
+.form-added-choice__inner
+  +media-breakpoint-up(md)
+    display: flex
+    align-items: flex-start
+    gap: .75rem
+
+.form-added-choice__col
+  &.is-main
+    flex: 1
+
+.form-added-choice__items
+  display: flex
+  +media-breakpoint-down(sm)
+    gap: 1rem
+
+.form-added-choice__action
+  +media-breakpoint-down(sm)
+    margin-top: .75rem
+    display: flex
+    justify-content: flex-end
+
+.form-added-choice__label
+  display: flex
+  height: 2.75rem
+  align-items: center
+  &.is-count
+    width: 1.5rem
+    text-align: center
+    justify-content: center
+    .form-item__vertical-separator &
+      height: 1.5rem

app/assets/stylesheets/application/blocks/form/_form-item.sass

@@ -119,3 +119,18 @@
   border-top: dashed 1px $warning
   color: $default-text
   font-weight: 400
+
+.form-item__add-times
+  +media-breakpoint-up(md)
+    margin-top: -.125rem
+  +media-breakpoint-down(sm)
+    margin-top: -1.25rem
+
+.form-item__add-choice
+  +media-breakpoint-up(md)
+    margin-top: 1rem
+  +media-breakpoint-down(sm)
+    margin-top: 1rem
+
+.form-item__option
+  margin-top: .5rem

app/assets/stylesheets/application/blocks/form/_form-selects.sass

@@ -1,9 +1,3 @@
-.form-item__times
-  display: flex
-  align-items: flex-end
-  +media-breakpoint-down(sm)
-    display: block
-
 .form-selects
   display: flex
 

app/assets/stylesheets/application/blocks/form/_form-times.sass

@@ -1,37 +1,35 @@
-.form-item__add-times
-  +media-breakpoint-up(md)
-    margin-top: -.125rem
+.form-times
+  display: flex
+  align-items: flex-end
   +media-breakpoint-down(sm)
-    margin-top: -1.25rem
+    display: block
 
-.form-item__times-inner
+.form-times__inner
   margin-bottom: 1rem
   +media-breakpoint-up(md)
     display: flex
     align-items: flex-end
 
-.form-item__times-items
+.form-times__items
   display: flex
   +media-breakpoint-down(sm)
     gap: 1rem
 
-.form-item__time
+.form-times__action
+  +media-breakpoint-down(sm)
+    margin-top: .75rem
+    display: flex
+    justify-content: flex-end
+  #tasks .form-item:first-child &
+    display: none
+
+.form-times__time
   display: flex
   flex-direction: column
   margin-right: 1rem
   +media-breakpoint-down(sm)
     margin-right: 0
     flex-basis: 50%
 
-.form-item__time-label
+.form-times__time-label
   +text-block(.75rem 1.4 0 .5rem, block)
-
-.form-item__times-action
-  +media-breakpoint-down(sm)
-    margin-top: .75rem
-    display: flex
-    justify-content: flex-end
-
-.form-item__times-action
-  #tasks .form-item:first-child &
-    display: none

app/assets/stylesheets/atoms/_a-block-check.sass

@@ -1,3 +1,6 @@
+.a-block-check
+  height: 100%
+
 .a-block-check__label
   background-color: $input-background
   height: 100%

app/controllers/survey_questions_controller.rb

@@ -0,0 +1,59 @@
+# frozen_string_literal: true
+
+class SurveyQuestionsController < ApplicationController
+  before_action :set_survey_question, only: %i[edit update]
+  before_action :require_admin_or_mentor_login
+
+  def index
+    @survey_questions = SurveyQuestion.all
+  end
+
+  def new
+    @survey_question = SurveyQuestion.new
+    @linear_scale = @survey_question.build_linear_scale
+    @radio_button = @survey_question.build_radio_button
+    @check_box = @survey_question.build_check_box
+    @radio_button_choices = @radio_button.radio_button_choices.build
+    @check_box_choices = @check_box.check_box_choices.build
+  end
+
+  def create
+    @survey_question = SurveyQuestion.new(survey_question_params)
+    @survey_question.user_id = current_user.id
+
+    if @survey_question.save
+      redirect_to survey_questions_path, notice: '質問を保存しました。'
+    else
+      render action: :new
+    end
+  end
+
+  def edit; end
+
+  def update
+    if @survey_question.update(survey_question_params)
+      redirect_to survey_questions_path, notice: '質問を保存しました。'
+    else
+      render action: :edit
+    end
+  end
+
+  private
+
+  def set_survey_question
+    @survey_question = SurveyQuestion.find(params[:id])
+  end
+
+  def survey_question_params
+    params.require(:survey_question).permit(:title, :description, :format, :answer_required,
+                                            linear_scale_attributes:
+                                              %i[id first last reason_for_choice_required] +
+                                              %i[title_of_reason description_of_reason],
+                                            radio_button_attributes:
+                                              %i[id title_of_reason description_of_reason] +
+                                              [radio_button_choices_attributes: %i[id choices reason_for_choice_required _destroy]],
+                                            check_box_attributes:
+                                              %i[id title_of_reason description_of_reason] +
+                                              [check_box_choices_attributes: %i[id choices reason_for_choice_required _destroy]])
+  end
+end

app/javascript/packs/application.js

@@ -38,6 +38,7 @@ import '../products.js'
 import '../courses-categories.js'
 import '../courses-practices.js'
 import '../no_learn.js'
+import '../survey_question.js'
 import '../searchables.js'
 import '../niconico_calendar.js'
 import '../mentor-mode.js'

app/javascript/survey_question.js

@@ -0,0 +1,101 @@
+document.addEventListener('DOMContentLoaded', () => {
+  const radioButtonChoices = document.getElementsByName(
+    'survey_question[format]'
+  )
+  const radioButtonElements = document.querySelectorAll('.radio_button')
+  const checkBoxElements = document.querySelectorAll('.check_box')
+  const linearScaleElements = document.querySelectorAll('.linear_scale')
+  const radioButtonTitleOfReasonForChoice = document.getElementById(
+    'survey_question_radio_button_attributes_title_of_reason'
+  )
+  const checkBoxTitleOfReasonForChoice = document.getElementById(
+    'survey_question_check_box_attributes_title_of_reason'
+  )
+  const linearScaleTitleOfReasonForChoice = document.getElementById(
+    'survey_question_linear_scale_attributes_title_of_reason'
+  )
+  const radioButtonDescriptionOfReasonForChoice = document.getElementById(
+    'survey_question_radio_button_attributes_description_of_reason'
+  )
+  const checkBoxDescriptionOfReasonForChoice = document.getElementById(
+    'survey_question_check_box_attributes_description_of_reason'
+  )
+  const linearScaleDescriptionOfReasonForChoice = document.getElementById(
+    'survey_question_linear_scale_attributes_description_of_reason'
+  )
+  const startOfScale = document.getElementById(
+    'survey_question_linear_scale_attributes_first'
+  )
+  const endOfScale = document.getElementById(
+    'survey_question_linear_scale_attributes_last'
+  )
+  const reasonForChoiceRequired = document.getElementById(
+    'survey_question_linear_scale_attributes_reason_for_choice_required'
+  )
+  const switchIsHidden = (radioButtonChoice) => {
+    if (
+      radioButtonChoice.value === 'text_field' ||
+      radioButtonChoice.value === 'text_area'
+    ) {
+      radioButtonElements.forEach((radioButtonElement) => {
+        radioButtonElement.classList.add('is-hidden')
+      })
+      checkBoxElements.forEach((checkBoxElement) => {
+        checkBoxElement.classList.add('is-hidden')
+      })
+      linearScaleElements.forEach((linearScaleElement) => {
+        linearScaleElement.classList.add('is-hidden')
+      })
+    } else if (radioButtonChoice.value === 'radio_button') {
+      radioButtonElements.forEach((radioButtonElement) => {
+        radioButtonElement.classList.remove('is-hidden')
+      })
+      checkBoxElements.forEach((checkBoxElement) => {
+        checkBoxElement.classList.add('is-hidden')
+      })
+      linearScaleElements.forEach((linearScaleElement) => {
+        linearScaleElement.classList.add('is-hidden')
+      })
+    } else if (radioButtonChoice.value === 'check_box') {
+      radioButtonElements.forEach((radioButtonElement) => {
+        radioButtonElement.classList.add('is-hidden')
+      })
+      checkBoxElements.forEach((checkBoxElement) => {
+        checkBoxElement.classList.remove('is-hidden')
+      })
+      linearScaleElements.forEach((linearScaleElement) => {
+        linearScaleElement.classList.add('is-hidden')
+      })
+    } else if (radioButtonChoice.value === 'linear_scale') {
+      radioButtonElements.forEach((radioButtonElement) => {
+        radioButtonElement.classList.add('is-hidden')
+      })
+      checkBoxElements.forEach((checkBoxElement) => {
+        checkBoxElement.classList.add('is-hidden')
+      })
+      linearScaleElements.forEach((linearScaleElement) => {
+        linearScaleElement.classList.remove('is-hidden')
+      })
+    }
+  }
+
+  radioButtonChoices.forEach((radioButtonChoice) => {
+    radioButtonChoice.checked && switchIsHidden(radioButtonChoice)
+    radioButtonChoice.addEventListener('change', () => {
+      const removeFieldsElements = document.querySelectorAll('.remove_fields')
+      removeFieldsElements.forEach((removeFieldsElement) => {
+        removeFieldsElement.click()
+      })
+      radioButtonTitleOfReasonForChoice.value = null
+      radioButtonDescriptionOfReasonForChoice.value = null
+      checkBoxTitleOfReasonForChoice.value = null
+      checkBoxDescriptionOfReasonForChoice.value = null
+      linearScaleTitleOfReasonForChoice.value = null
+      linearScaleDescriptionOfReasonForChoice.value = null
+      startOfScale.value = null
+      endOfScale.value = null
+      reasonForChoiceRequired.checked = false
+      switchIsHidden(radioButtonChoice)
+    })
+  })
+})

app/models/check_box.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+class CheckBox < ApplicationRecord
+  belongs_to :survey_question
+  has_many :check_box_choices, dependent: :destroy
+  accepts_nested_attributes_for :check_box_choices, allow_destroy: true
+  validates_associated :check_box_choices
+
+  with_options if: -> { survey_question.format == 'check_box' }, presence: true do
+    validates :check_box_choices
+    validates :title_of_reason
+  end
+end

app/models/check_box_choice.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class CheckBoxChoice < ApplicationRecord
+  belongs_to :check_box
+
+  validates :choices, presence: true, if: -> { check_box.survey_question.format == 'check_box' }
+end

app/models/linear_scale.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+class LinearScale < ApplicationRecord
+  belongs_to :survey_question
+
+  with_options if: -> { survey_question.format == 'linear_scale' }, presence: true do
+    validates :first
+    validates :last
+    validates :title_of_reason
+  end
+end

app/models/radio_button.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+class RadioButton < ApplicationRecord
+  belongs_to :survey_question
+  has_many :radio_button_choices, dependent: :destroy
+  accepts_nested_attributes_for :radio_button_choices, allow_destroy: true
+  validates_associated :radio_button_choices
+
+  with_options if: -> { survey_question.format == 'radio_button' }, presence: true do
+    validates :radio_button_choices
+    validates :title_of_reason
+  end
+end

app/models/radio_button_choice.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class RadioButtonChoice < ApplicationRecord
+  belongs_to :radio_button
+
+  validates :choices, presence: true, if: -> { radio_button.survey_question.format == 'radio_button' }
+end

app/models/survey_question.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+class SurveyQuestion < ApplicationRecord
+  belongs_to :user
+  has_one :linear_scale, dependent: :destroy
+  accepts_nested_attributes_for :linear_scale, allow_destroy: true
+  validates_associated :linear_scale
+  has_one :radio_button, dependent: :destroy
+  accepts_nested_attributes_for :radio_button, allow_destroy: true
+  validates_associated :radio_button
+  has_one :check_box, dependent: :destroy
+  accepts_nested_attributes_for :check_box, allow_destroy: true
+  validates_associated :check_box
+
+  enum format: {
+    text_area: 0,
+    text_field: 1,
+    radio_button: 2,
+    check_box: 3,
+    linear_scale: 4
+  }, _prefix: true
+
+  validates :title, presence: true
+end