Merge pull request #4633 from fjordllc/feature/display-number-of-prod…

…ucts 提出物一覧ページの未アサインタブに各日数経過の件数を表示する
fjordllc · Apr 23, 2022 · 609a1e0 · 609a1e0
2 parents fb33ef8 + be8af2f
commit 609a1e0
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 10 deletions.
diff --git a/app/assets/stylesheets/blocks/card/_card-header.sass b/app/assets/stylesheets/blocks/card/_card-header.sass
@@ -24,6 +24,11 @@
   .card-header.is-sm &
     font-size: .875rem
 
+.card-header__count
+  font-weight: 400
+  letter-spacing: 0
+  margin-left: .125rem
+
 .card-header__title-emotion-image
   +size(1.25em)
   display: inline-block

diff --git a/app/javascript/products.vue b/app/javascript/products.vue
@@ -25,21 +25,36 @@
         header.card-header.a-elapsed-days(
           v-if='product_n_days_passed.elapsed_days === 0'
         )
-          h2 今日提出
+          h2.card-header__title
+            | 今日提出
+            span.card-header__count(v-if='selectedTab === "unassigned"')
+              | （{{ countProductsGroupedBy(product_n_days_passed) }}）
         header.card-header.a-elapsed-days.is-reply-warning(
           v-else-if='product_n_days_passed.elapsed_days === 5'
         )
-          h2 {{ product_n_days_passed.elapsed_days }}日経過
+          h2.card-header__title
+            | {{ product_n_days_passed.elapsed_days }}日経過
+            span.card-header__count(v-if='selectedTab === "unassigned"')
+              | （{{ countProductsGroupedBy(product_n_days_passed) }}）
         header.card-header.a-elapsed-days.is-reply-alert(
           v-else-if='product_n_days_passed.elapsed_days === 6'
         )
-          h2 {{ product_n_days_passed.elapsed_days }}日経過
+          h2.card-header__title
+            | {{ product_n_days_passed.elapsed_days }}日経過
+            span.card-header__count(v-if='selectedTab === "unassigned"')
+              | （{{ countProductsGroupedBy(product_n_days_passed) }}）
         header.card-header.a-elapsed-days.is-reply-deadline(
           v-else-if='product_n_days_passed.elapsed_days === 7'
         )
-          h2 {{ product_n_days_passed.elapsed_days }}日以上経過
+          h2.card-header__title
+            | {{ product_n_days_passed.elapsed_days }}日以上経過
+            span.card-header__count(v-if='selectedTab === "unassigned"')
+              | （{{ countProductsGroupedBy(product_n_days_passed) }}）
         header.card-header.a-elapsed-days(v-else)
-          h2 {{ product_n_days_passed.elapsed_days }}日経過
+          h2.card-header__title
+            | {{ product_n_days_passed.elapsed_days }}日経過
+            span.card-header__count(v-if='selectedTab === "unassigned"')
+              | （{{ countProductsGroupedBy(product_n_days_passed) }}）
         .thread-list__items
           product(
             v-for='product in product_n_days_passed.products',
@@ -191,6 +206,12 @@ export default {
           params[queryArr[0]] = queryArr[1]
         })
       return params
+    },
+    countProductsGroupedBy({ elapsed_days: elapsedDays }) {
+      const element = this.productsGroupedByElapsedDays.find(
+        (el) => el.elapsed_days === elapsedDays
+      )
+      return element === undefined ? 0 : element.products.length
     }
   }
 }

diff --git a/test/integration/api/products_test.rb b/test/integration/api/products_test.rb
@@ -63,4 +63,14 @@ class API::ProductsTest < ActionDispatch::IntegrationTest
         headers: { 'Authorization' => "Bearer #{token}" }
     assert_response :ok
   end
+
+  test 'return correct number of products' do
+    token = create_token('komagata', 'testtest')
+    get api_products_unassigned_index_path(format: :json),
+        headers: { 'Authorization' => "Bearer #{token}" }
+
+    expected = products(:product8, :product10, :product11, :product12, :product13, :product14).map.count
+    actual = response.parsed_body['products_grouped_by_elapsed_days'].find { |i| i['elapsed_days'] == 7 }['products'].count
+    assert_equal expected, actual
+  end
 end
diff --git a/test/system/product/unassigned_test.rb b/test/system/product/unassigned_test.rb
@@ -45,11 +45,11 @@ class Product::UnassignedTest < ApplicationSystemTestCase
     assert_equal 'sshdでパスワード認証を禁止にする', newest_product.practice.title
   end
 
-  test 'display elapsed days label' do
+  test 'display elapsed days label and number of products' do
     visit_with_auth '/products/unassigned', 'komagata'
-    assert_text '今日提出'
-    assert_text '5日経過'
-    assert_text '6日経過'
-    assert_text '7日以上経過'
+    assert_text '7日以上経過（6）'
+    assert_text '6日経過（1）'
+    assert_text '5日経過（1）'
+    assert_text '今日提出（48）'
   end
 end