「参考書籍一覧」を非Vue化した

app/controllers/books_controller.rb

@@ -4,7 +4,14 @@ class BooksController < ApplicationController
   before_action :set_book, only: %i[edit update destroy]
   before_action :require_admin_or_mentor_login, except: %i[index]
 
-  def index; end
+  def index
+    books = Book.all
+    books = params[:practice_id].present? ? books.joins(:practices).where(practices: { id: params[:practice_id] }) : books
+    @books = books
+             .with_attached_cover
+             .includes(:practices)
+             .order(updated_at: :desc, id: :desc)
+  end
 
   def new
     @book = Book.new

app/javascript/packs/application.js

@@ -58,7 +58,6 @@ import '../user_mentor_memo.js'
 import '../invitation-url-updater.js'
 
 import VueMounter from '../VueMounter.js'
-import Books from '../components/books.vue'
 import Questions from '../components/questions.vue'
 import UsersAnswers from '../components/users-answers.vue'
 import User from '../components/user.vue'
@@ -74,7 +73,6 @@ import CourseBooks from '../components/course-books.vue'
 import '../stylesheets/application'
 
 const mounter = new VueMounter()
-mounter.addComponent(Books)
 mounter.addComponent(Questions)
 mounter.addComponent(UsersAnswers)
 mounter.addComponent(User)

app/views/books/_book.html.slim

@@ -0,0 +1,50 @@
+.col-xxxl-2.col-xxl-3.col-xl-4.col-lg-4.col-md-6.col-xs-12
+  .card-books-item.a-card
+    .card-books-item__body
+      .card-books-item__inner
+        .card-books-item__start
+          = link_to book.page_url,
+                    target: '_blank',
+                    rel: 'noopener',
+                    class: 'card-books-item__cover-container' do
+                      = image_tag book.cover_url,
+                        title: book.page_url,
+                        alt: book.title,
+                        class: 'card-books-item__image'
+        .card-books-item__end
+          .card-books-item__rows
+            .card-books-item__row
+              h2.card-books-item__title
+                - if book.must_read_for_any_practices?
+                  span.a-badge.is-danger.is-sm
+                    | 必読
+                = link_to book.page_url,
+                          target: '_blank',
+                          rel: 'noopener',
+                          class: 'card-books-item__title-link' do
+                  span.card-books-item__title-label
+                    | #{book.title}
+            .card-books-item__row
+              p.card-books-item__price
+                | #{book.price.to_s(:delimited)}円（税込）
+          - if book.description
+            .card-books-item__row
+              .card-books-item__description
+                .a-short-text
+                  p
+                    |#{book.description}
+    .card-books-item__practices
+      .tag-links
+        ul.tag-links__items
+          - book.practices.each do |practice|
+            li.tag-links__item
+              = link_to practice.path, class: 'tag-links__item-link' do
+                | #{practice.title}
+      hr.a-border-tint
+    - if admin_or_mentor_login?
+      footer.card-footer.is-only-mento
+        .card-main-actions
+          ul.card-main-actions__items
+            li.card-main-actions__item
+              = link_to edit_book_path(book), class: 'card-main-actions__action a-button is-sm is-secondary is-block' do
+                | 編集

app/views/books/index.html.slim

@@ -17,4 +17,26 @@ header.page-header
                   span
                     | 参考書籍登録
 hr.a-border
-div(data-vue="Books" data-vue-is-admin:boolean="#{current_user.admin?}" data-vue-is-mentor:boolean="#{current_user.mentor?}")
+nav.page-filter.form
+  .container.is-md
+    = form_with url: books_path, local: true, method: 'get' do
+      .form-item.is-inline-md-up
+        = label_tag :practice_id, 'プラクティスで絞り込む', class: 'a-form-label'
+        = select_tag :practice_id,
+                     options_from_collection_for_select(current_user.practices, :id, :title, selected: params[:practice_id]),
+                   include_blank: 'すべての参考書籍を表示',
+                   onchange: 'this.form.submit()',
+                   id: 'js-choices-single-select'
+.page-content.is-books
+  .container
+    .books
+    - if @books.empty?
+      .o-empty-message
+        .o-empty-message__icon
+          i.fa-regular.fa-sad-tear
+        p.o-empty-message__text
+          | 登録されている本はありません
+    - else
+      .books__items
+        .row
+          = render @books