Merge pull request #7527 from fjordllc/feature/courses_practices_and_…

…courses_practice_vue_delete

カテゴリー/プラクティスのページをhtmlとjsで実装し、vueファイルを削除

app/controllers/courses/practices_controller.rb

@@ -3,5 +3,7 @@
 class Courses::PracticesController < ApplicationController
   def index
     @course = Course.find(params[:course_id])
+    @categories = @course.categories.order(:created_at)
+    @learnings = current_user.learnings
   end
 end

app/javascript/courses-practices.js

@@ -1,17 +1,11 @@
-import Vue from 'vue'
-import CoursesPractices from 'courses-practices.vue'
-
 document.addEventListener('DOMContentLoaded', () => {
-  const selector = '#js-courses-practices'
-  const practices = document.querySelector(selector)
-  if (practices) {
-    const courseId = practices.getAttribute('course-id')
-    const currentUser = window.currentUser
-    new Vue({
-      render: (h) =>
-        h(CoursesPractices, {
-          props: { courseId: courseId, currentUser: currentUser }
-        })
-    }).$mount(selector)
+  function scrollToCategory() {
+    const count = location.href.search('#')
+    const hash = location.href.slice(count + 1)
+    const element = document.getElementById(hash)
+    if (element) {
+      element.scrollIntoView()
+    }
   }
+  scrollToCategory()
 })

app/models/practice.rb

@@ -184,4 +184,14 @@ def total_learning_minute(report)
   def average_minute_per_practice(minute, size)
     minute / size
   end
+
+  def convert_to_hour_minute(learning_minute_statistic)
+    converted_hour = learning_minute_statistic / 60
+    converted_minute = (learning_minute_statistic % 60).round
+    if converted_minute.zero?
+      "#{converted_hour}時間"
+    else
+      "#{converted_hour}時間#{converted_minute}分"
+    end
+  end
 end

app/views/courses/practices/_courses_practice.html.slim

@@ -0,0 +1,25 @@
+.category-practices-item
+  a.category-practices-item__anchor :id="practice_#{practice.id}"
+  header.category-practices-item__header
+    .category-practices-item__title
+      a.category-practices-item__title-link href=practice_path(practice.id)
+        - if practice.include_must_read_books?
+          span.a-badge.is-danger.is-xs 要書籍
+        span.category-practices-item__title-link-label = practice.title
+    - learning = learnings.find { |l| l.practice_id == practice.id }
+    - learning_status = learning ? learning.status : 'unstarted'
+    a.practice-status.category-practices-item__status(
+      class="is-#{learning_status}",
+      href="#{practice_path(practice.id)}#learning-Status")
+        = t("activerecord.enums.learning.status.#{learning_status}")
+
+  .category-practices-item__learning-time.is-only-mentor
+    - unless practice.learning_minute_statistic.nil?
+      - learning_minute_statistic = practice.learning_minute_statistic
+      | 所要時間の目安: #{convert_to_hour_minute(learning_minute_statistic.median)}
+      |  （平均: #{convert_to_hour_minute(learning_minute_statistic.average)}）
+  - if practice.started_students.present?
+    .a-user-icons
+      .a-user-icons__items
+      - practice.started_students.each do |started_student|
+        == render 'practice_user_icon', started_student: started_student

app/views/courses/practices/_courses_practices.html.slim

@@ -0,0 +1,30 @@
+.page-body__inner
+  .page-body__columns
+    .page-body__column.is-main
+      - categories.each do |category|
+        - if category.practices.present?
+          .categories-item.practices(id="category-#{category.id}")
+            header.categories-item__header
+              h2.categories-item__title
+                = category.name
+                - if category.practices.size == current_user.completed_practices_size_by_category[category.id]
+                  span.stamp.is-circle.is-solved 修了
+            .categories-item__description
+              - if current_user.mentor
+                .categories-item__edit.is-only-mentor
+                  a.categories-item__edit-link href=edit_mentor_category_path(category.id, course_id: course_id)
+                    i.fa-solid.fa-pen
+              .a-long-text.is-md
+                = category.description
+            .categories-item__body.a-card
+              .category-practices
+                - category.practices.each do |practice|
+                  == render 'courses_practice', practice: practice, learnings: learnings
+    .page-body__column.is-sub
+      nav.page-nav.a-card
+        ul.page-nav__items
+          - categories.each do |category|
+            - if category.practices.present?
+              li.page-nav__item
+                a.page-nav__item-link href="practices#category-#{category.id}"
+                  span.page-nav__item-link-inner = category.name

app/views/courses/practices/_practice_user_icon.html.slim

@@ -0,0 +1,4 @@
+.a-user-icons__item
+  a.a-user-icons__item-link(href="#{user_path(started_student)}")
+    span.a-user-role(class="a-user-role is-#{started_student.primary_role}")
+      = image_tag started_student.avatar_url, title: started_student.icon_title, class: 'a-user-icons__item-icon a-user-icon'

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

@@ -38,4 +38,4 @@ header.page-header
 = render 'courses/tabs'
 .page-body.js-users-visibility
   .container.is-xl
-    #js-courses-practices(course-id="#{@course.id}")
+    = render 'courses_practices', course_id: @course.id, categories: @categories, learnings: @learnings