質問一覧・詳細表示機能の非Vue化

app/controllers/practices/questions_controller.rb

@@ -3,6 +3,13 @@
 class Practices::QuestionsController < ApplicationController
   def index
     @practice = Practice.find(params[:practice_id])
+    allowed_targets = %w[solved not_solved].freeze
+    target = allowed_targets.include?(params[:target]) ? params[:target] : nil
+    @questions = @practice.questions
+                          .includes(%i[correct_answer answers])
+                          .by_target(target)
+                          .order(created_at: :desc)
+                          .page(params[:page])
     @empty_message = empty_message
   end
 

app/controllers/users/questions_controller.rb

@@ -5,7 +5,7 @@ class Users::QuestionsController < ApplicationController
 
   def index
     @user = User.find(params[:user_id])
-    @questions = @user.questions.includes(%i[correct_answer practice answers tag_taggings tags]).order(created_at: :desc)
+    @questions = @user.questions.includes(%i[correct_answer practice answers tag_taggings tags]).order(created_at: :desc).page(params[:page])
     @questions_property = QuestionsProperty.new('全ての質問', '質問はありません。')
   end
 end

app/views/practices/questions/index.html.slim

@@ -24,4 +24,4 @@ nav.tab-nav
 
 .page-body
   .container.is-md
-    div(data-vue='Questions' data-vue-empty-message="#{@empty_message}" data-vue-practice-id="#{params[:practice_id]}")
+    = render 'questions/questions', questions: @questions, empty_message: @empty_message

app/views/questions/_question.html.slim

@@ -0,0 +1,57 @@
+.card-list-item.(class="#{(question.correct_answer.present? && 'is-solved') || (question.wip? && 'is-wip')}")
+  .card-list-item__inner
+    .card-list-item__user
+      = link_to question.user, class: 'card-list-item__user-link'
+        span.a-user-role.(class="is-#{question.user.primary_role}")
+          img.card-list-item__user-icon.a-user-icon title="#{question.user.icon_title}" alt="#{question.user.icon_title}" src="#{question.user.avatar_url}"
+    .card-list-item__rows
+      .card-list-item__row
+        .card-list-item-title
+          - if question.wip?
+            .a-list-item-badge.is-wip
+              span
+                | WIP
+          h1.card-list-item-title__title itemprop='name'
+            = link_to question, class: 'card-list-item-title__link a-text-link', itemprop: 'url' do
+              = question.title
+      - if question.practice
+        .card-list-item__row
+          .card-list-item-meta
+            .card-list-item-meta__items
+              .card-list-item-meta__item
+                = link_to question.practice, class: 'a-meta is-practice'
+                  = question.practice.title
+      .card-list-item__row
+        .card-list-item-meta
+          .card-list-item-meta__items
+            - if question.wip?
+              .card-list-item-meta__item
+                .a-meta
+                  | 質問作成中
+            .card-list-item-meta__item
+              = link_to question.user, class: 'a-user-name'
+                = question.user.long_name
+      .card-list-item__row
+        .card-list-item-meta
+          .card-list-item-meta__items
+            - if !question.wip?
+              .card-list-item-meta__item
+                time.a-meta
+                  span.a-meta__label
+                    | 公開
+                  span.a-meta__value
+                    = l question.published_at, format: :default
+              .card-list-item-meta__item
+                time.a-meta
+                  span.a-meta__label
+                    | 更新
+                  span.a-meta__value
+                    = l question.updated_at, format: :default
+            .card-list-item-meta__item
+              .a-meta.(class="#{question.answers.empty? ? 'is-important' : ''}")
+                | 回答・コメント
+                = "（#{question.answers.size}）"
+    - if question.correct_answer.present?
+      .stamp.is-circle.is-solved
+        .stamp__content.is-icon 解
+        .stamp__content.is-icon 決

app/views/questions/_questions.html.slim

@@ -0,0 +1,17 @@
+- if questions.nil?
+  = render 'shared/loading_list_placeholder'
+- elsif questions.empty?
+  .o-empty-message
+      .o-empty-message__icon
+        i.fa-regular.fa-sad-tear
+      p.o-empty-message__text
+        = empty_message
+- else
+  nav.pagination
+    = paginate questions
+    .card-list.a-card
+      .card-list__items
+        - questions.each do |question|
+          = render 'questions/question', question: question
+  nav.pagination
+    = paginate questions

app/views/questions/index.html.slim

@@ -52,7 +52,7 @@ header.page-header
       .container.is-md
         .page-body__columns
           .page-body__column.is-main
-            div(data-vue='Questions' data-vue-empty-message="#{@questions_property.empty_message}" data-vue-selected-tag="#{params[:tag]}")
+            = render 'questions/questions', questions: @questions, empty_message: @questions_property.empty_message
       - if @tags.any?
         nav.a-side-nav
           .a-side-nav__inner

app/views/shared/_loading_list_placeholder.html.slim

@@ -0,0 +1,13 @@
+.card-list.a-card.is-loading
+  - 8.times do
+    .card-list-item
+      .card-list-item__inner
+        .card-list-item__user
+          .card-list-item__user-icon.a-user-icon.a-placeholder
+        .card-list-item__rows
+          .card-list-item__row
+            .card-list-item-title.a-placeholder
+          .card-list-item__row
+            .card-list-item-meta__items.a-placeholder
+              .card-list-item-meta__item
+              .card-list-item-meta__item

app/views/users/questions/index.html.slim

@@ -6,4 +6,4 @@
 
 .page-body
   .container.is-md
-    div(data-vue='Questions' data-vue-empty-message="#{@questions_property.empty_message}" data-vue-selected-tag="#{params[:tag]}" data-vue-user-id:number="#{params[:user_id]}")
+    = render 'questions/questions', questions: @questions, empty_message: @questions_property.empty_message