Q&A個別ページに同プラクティス関連Q&A一覧を追加する

app/assets/stylesheets/shared/blocks/_page-nav.sass

@@ -10,6 +10,7 @@
   border: solid 1px $border
   background-color: $base
   border-radius: .25rem .25rem 0 0
+  +position(relative, 1)
 
 .page-nav__title
   +text-block(.875rem 1.4, 600)
@@ -29,7 +30,7 @@
   border: solid 1px $border
   background-color: $base
   border-radius: 0 0 .25rem .25rem
-  transform: translateY(-1px)
+  transform: translateY(-2px)
 
 .page-nav__footer-link
   +block-link
@@ -100,6 +101,26 @@
   +block-link
   transition: all .1s ease-in
   background-color: transparent
-  &:hover
+  &:not(.has-metas):hover
     color: $primary-text
     text-decoration: underline
+  &.has-metas:hover
+    .page-nav__item-title
+      transition: all .2s ease-out
+      color: $primary-text
+      text-decoration: underline
+
+.page-nav__item-header .a-badge
+  transform: translateY(-.125em)
+  margin-right: .25rem
+
+
+.page-nav__item-title
+  +text-block(.875rem 1.4, 600 inline)
+
+.page-nav-metas
+  margin-top: .25rem
+  font-size: .75rem
+  display: flex
+  flex-wrap: wrap
+  gap: .25rem .75rem

app/controllers/questions_controller.rb

@@ -8,6 +8,8 @@ class QuestionsController < ApplicationController
 
   QuestionsProperty = Struct.new(:title, :empty_message)
 
+  MAX_PRACTICE_QUESTIONS_DISPLAYED = 20
+
   def index
     questions =
       case params[:target]
@@ -31,6 +33,13 @@ def index
   end
 
   def show
+    @practice_questions = Question
+                          .not_wip
+                          .where(practice: @question.practice)
+                          .where.not(id: @question.id)
+                          .includes(:correct_answer)
+                          .order(updated_at: :desc, id: :desc)
+                          .limit(MAX_PRACTICE_QUESTIONS_DISPLAYED)
     respond_to do |format|
       format.html
       format.md

app/views/questions/_nav_questions.html.slim

@@ -0,0 +1,16 @@
+          ul.page-nav__items
+            - questions.each do |question|
+              li.page-nav__item(class="#{@question == question ? 'is-current' : ''}")
+                = link_to question_path(question), class: 'page-nav__item-link has-metas' do
+                  .page-nav__item-link-inner
+                    .page-nav__item-header
+                      - unless question.correct_answer
+                        .a-badge.is-danger.is-xs
+                          | 未解決
+                      .page-nav__item-title
+                        = question.title
+                  .page-nav-metas
+                    .page-nav-metas__item
+                      = "公開:#{l question.published_at}"
+                    .page-nav-metas__item
+                      = "回答・コメント(#{question.answers.count})"

app/views/questions/show.html.slim

@@ -14,4 +14,26 @@ header.page-header
             = link_to questions_path(target: 'not_solved'), class: 'a-button is-md is-secondary is-block is-back' do
               | Q&A一覧
 
-div(data-vue="QuestionPage" data-vue-current-user-id="#{current_user.id}" data-vue-question-id="#{@question.id}")
+.page-body
+  .container.is-xxl
+    .row.is-gutter-width-32
+      .col-lg-8.col-xs-12
+        div(data-vue="QuestionPage" data-vue-current-user-id="#{current_user.id}" data-vue-question-id="#{@question.id}")
+
+      .col-lg-4.col-xs-12
+        nav.page-nav.has-footer.page-nav.has-footer
+          header.page-nav__header
+            h2.page-nav__title
+              - if @question.practice
+                = link_to @question.practice,
+                      class: 'page-nav__title-link' do
+                  = @question.practice.title
+              - else
+                | 関連プラクティス無し
+
+          = render 'nav_questions', questions: @practice_questions
+
+          footer.page-nav__footer
+            = link_to questions_path(practice_id: @question.practice),
+              class: 'page-nav__footer-link' do
+              | 全て見る

test/system/questions_test.rb

@@ -420,4 +420,26 @@ class QuestionsTest < ApplicationSystemTestCase
     assert_text 'テストの質問（修正）'
     assert_text 'テストの質問です。（修正）'
   end
+
+  test 'show practice questions and the link works' do
+    question = questions(:question7)
+    visit_with_auth question_path(question), 'kimura'
+
+    find('.page-nav').click_link 'OS X Mountain Lionをクリーンインストールする'
+    find('h1') { assert_text 'OS X Mountain Lionをクリーンインストールする' }
+    go_back
+
+    find('.page-nav').click_link 'どのエディターを使うのが良いでしょうか'
+    find('h1') { assert_text 'どのエディターを使うのが良いでしょうか' }
+    go_back
+
+    find('.page-nav').click_link '全て見る'
+    find('.choices__item') { assert_text 'OS X Mountain Lionをクリーンインストールする' }
+    go_back
+
+    within '.page-nav' do
+      assert_no_text question.title
+      assert_no_text 'wipテスト用の質問(wip中)'
+    end
+  end
 end