未アサインの提出物のアラートを変更した

app/controllers/api/products/passed_controller.rb

@@ -3,10 +3,12 @@
 class API::Products::PassedController < API::BaseController
   def show
     products = Product
-               .list
-               .ascending_by_date_of_publishing_and_id
-    @passed5 = products.count { |product| product.elapsed_days == 5 }
-    @passed6 = products.count { |product| product.elapsed_days == 6 }
-    @over7 = products.count { |product| product.elapsed_days >= 7 }
+               .unassigned
+               .unchecked
+               .not_wip
+    @product_deadline_day = Product::PRODUCT_DEADLINE
+    @first_alert = products.count { |product| product.elapsed_days == @product_deadline_day }
+    @second_alert = products.count { |product| product.elapsed_days == @product_deadline_day + 1 }
+    @last_alert = products.count { |product| product.elapsed_days >= @product_deadline_day + 2 }
   end
 end

app/controllers/api/products/unassigned_controller.rb

@@ -9,16 +9,17 @@ def index
                 .not_wip
                 .list
                 .ascending_by_date_of_publishing_and_id
-    @products_grouped_by_elapsed_days = @products.group_by { |product| product.elapsed_days >= 7 ? 7 : product.elapsed_days }
+    @products_grouped_by_elapsed_days = @products.group_by(&:elapsed_days)
   end
 
   def counts
     products = Product
                .unassigned
                .unchecked
                .not_wip
-    @passed5 = products.count { |product| product.elapsed_days == 5 }
-    @passed6 = products.count { |product| product.elapsed_days == 6 }
-    @over7 = products.count { |product| product.elapsed_days >= 7 }
+    @product_deadline_day = Product::PRODUCT_DEADLINE
+    @first_alert = products.count { |product| product.elapsed_days == @product_deadline_day }
+    @second_alert = products.count { |product| product.elapsed_days == @product_deadline_day + 1 }
+    @last_alert = products.count { |product| product.elapsed_days >= @product_deadline_day + 2 }
   end
 end

app/controllers/api/products/unchecked_controller.rb

@@ -22,7 +22,7 @@ def index
                          .page(params[:page])
                 end
     @products = @products.where(checker_id:) if checker_id.present?
-    @products_grouped_by_elapsed_days = @products.group_by { |product| product.elapsed_days >= 7 ? 7 : product.elapsed_days }
+    @products_grouped_by_elapsed_days = @products.group_by(&:elapsed_days)
   end
 
   private

app/controllers/api/products_controller.rb

@@ -11,7 +11,7 @@ def index
                 .order_for_all_list
                 .page(params[:page])
                 .per(per)
-    @products_grouped_by_elapsed_days = @products.group_by { |product| product.elapsed_days >= 7 ? 7 : product.elapsed_days }
+    @products_grouped_by_elapsed_days = @products.group_by(&:elapsed_days)
     @products = @products.joins(:user).where(users: { company_id: params[:company_id] }) if params[:company_id]
     @products = @products.where(user_id: params[:user_id]) if params[:user_id].present?
   end

app/controllers/home_controller.rb

@@ -46,6 +46,7 @@ def display_dashboard
     collegue_trainees_reports = Report.with_avatar.where(wip: false).where(user: current_user.collegue_trainees.with_attached_avatar)
     @collegue_trainees_recent_reports = collegue_trainees_reports.order(reported_on: :desc).limit(10)
     @recent_reports = Report.with_avatar.where(wip: false).order(reported_on: :desc, created_at: :desc).limit(10)
+    @product_deadline_day = Product::PRODUCT_DEADLINE
     @collegues = current_user.collegues_other_than_self
   end
 

app/controllers/products/unassigned_controller.rb

@@ -2,5 +2,7 @@
 
 class Products::UnassignedController < ApplicationController
   before_action :require_staff_login
-  def index; end
+  def index
+    @product_deadline_day = Product::PRODUCT_DEADLINE
+  end
 end

app/javascript/components/ElapsedDays.jsx

@@ -1,46 +1,51 @@
 import React from 'react'
 
-export default function ElapsedDays({ countProductsGroupedBy }) {
+export default function ElapsedDays({
+  countProductsGroupedBy,
+  productDeadlineDay
+}) {
   const activeClass = (quantity) => {
     return quantity ? 'is-active' : 'is-inactive'
   }
 
+  const renderElapsedDay = (elapsedDays, linkHref, linkText, alertText) => {
+    return (
+      <li
+        className={`page-nav__item is-reply-${linkText} border-b-0 ${activeClass(
+          countProductsGroupedBy(productDeadlineDay + elapsedDays)
+        )}`}>
+        <a className="page-nav__item-link" href={`#${linkHref}`}>
+          <span className="page-nav__item-link-inner">
+            {productDeadlineDay + elapsedDays}日{alertText}経過
+            {` (${countProductsGroupedBy(productDeadlineDay + elapsedDays)})`}
+          </span>
+        </a>
+      </li>
+    )
+  }
+
   return (
     <nav className="page-body__column is-sub">
       <div className="page-nav a-card">
         <ol className="page-nav__items elapsed-days">
-          <li
-            className={`page-nav__item is-reply-deadline border-b-0 ${activeClass(
-              countProductsGroupedBy(7)
-            )}`}>
-            <a className="page-nav__item-link" href="#7days-elapsed">
-              <span className="page-nav__item-link-inner">
-                7日以上経過{` (${countProductsGroupedBy(7)})`}
-              </span>
-            </a>
-          </li>
-          <li
-            className={`page-nav__item is-reply-alert border-b-0 ${activeClass(
-              countProductsGroupedBy(6)
-            )}`}>
-            <a className="page-nav__item-link" href="#6days-elapsed">
-              <span className="page-nav__item-link-inner">
-                6日経過{` (${countProductsGroupedBy(6)})`}
-              </span>
-            </a>
-          </li>
-          <li
-            className={`page-nav__item is-reply-warning border-b-0 ${activeClass(
-              countProductsGroupedBy(5)
-            )}`}>
-            <a className="page-nav__item-link" href="#5days-elapsed">
-              <span className="page-nav__item-link-inner">
-                5日経過{` (${countProductsGroupedBy(5)})`}
-              </span>
-            </a>
-          </li>
-          {[4, 3, 2, 1].map((passedDay) => {
-            return (
+          {renderElapsedDay(
+            2,
+            `${productDeadlineDay + 2}days-elapsed`,
+            'deadline',
+            '以上'
+          )}
+          {renderElapsedDay(
+            1,
+            `${productDeadlineDay + 1}days-elapsed`,
+            'alert'
+          )}
+          {renderElapsedDay(0, `${productDeadlineDay}days-elapsed`, 'warning')}
+          {Array.from(
+            { length: productDeadlineDay - 1 },
+            (_, index) => index + 1
+          )
+            .reverse()
+            .map((passedDay) => (
               <li
                 key={passedDay}
                 className={`page-nav__item ${activeClass(
@@ -55,8 +60,7 @@ export default function ElapsedDays({ countProductsGroupedBy }) {
                   </span>
                 </a>
               </li>
-            )
-          })}
+            ))}
           <li
             className={`page-nav__item ${activeClass(
               countProductsGroupedBy(0)

app/javascript/components/Products.jsx

@@ -13,7 +13,8 @@ export default function Products({
   selectedTab,
   isMentor,
   isAdmin,
-  currentUserId
+  currentUserId,
+  productDeadlineDay
 }) {
   const { page, setPage } = usePage()
 
@@ -49,21 +50,45 @@ export default function Products({
     return element
   }
 
-  const countProductsGroupedBy = (elapsedDays) => {
-    const element = getElementNdaysPassed(
-      elapsedDays,
-      data.products_grouped_by_elapsed_days
+  const isNotProductDeadlineDaysElapsed = () => {
+    if (!data || !data.products_grouped_by_elapsed_days) return true
+
+    return !data.products_grouped_by_elapsed_days.some(
+      (group) => group.elapsed_days >= productDeadlineDay
     )
-    return element === undefined ? 0 : element.products.length
   }
 
-  const isNotProduct5daysElapsed = () => {
-    const elapsedDays = []
-    data.productsGroupedByElapsedDays.forEach((group) => {
-      elapsedDays.push(group.elapsed_days)
+  const updateElapsedDays = (productsGroupedByElapsedDays) => {
+    const updateElapsedDays = []
+    productsGroupedByElapsedDays.forEach((group) => {
+      const elapsedDays =
+        group.elapsed_days >= productDeadlineDay + 2
+          ? productDeadlineDay + 2
+          : group.elapsed_days
+      let existingGroup = updateElapsedDays.find(
+        (g) => g.elapsed_days === elapsedDays
+      )
+      if (!existingGroup) {
+        existingGroup = {
+          elapsed_days: elapsedDays,
+          products: []
+        }
+        updateElapsedDays.push(existingGroup)
+      }
+      existingGroup.products = existingGroup.products.concat(group.products)
     })
-    return elapsedDays.every((day) => day < 5)
+    return updateElapsedDays
   }
+
+  const dataElapsedDays = updateElapsedDays(
+    data?.products_grouped_by_elapsed_days || []
+  )
+
+  const countProductsGroupedBy = (elapsedDays) => {
+    const element = getElementNdaysPassed(elapsedDays, dataElapsedDays)
+    return element ? element.products.length : 0
+  }
+
   const elapsedDaysId = (elapsedDays) => {
     return `${elapsedDays}days-elapsed`
   }
@@ -97,13 +122,15 @@ export default function Products({
         </div>
       </>
     )
-  } else if (isDashboard() && isNotProduct5daysElapsed()) {
+  } else if (isDashboard() && isNotProductDeadlineDaysElapsed()) {
     return (
       <div className="o-empty-message loaded">
         <div className="o-empty-message__icon">
           <i className="fa-regular fa-smile" />
         </div>
-        <p className="o-empty-message__text">5日経過した提出物はありません</p>
+        <p className="o-empty-message__text">
+          {productDeadlineDay}日経過した提出物はありません
+        </p>
       </div>
     )
   } else if (selectedTab !== 'unassigned') {
@@ -163,8 +190,9 @@ export default function Products({
       <div className="page-content is-products loaded">
         <div className="page-body__columns">
           <div className="page-body__column is-main">
-            {data.products_grouped_by_elapsed_days.map(
-              (productsNDaysPassed) => {
+            {dataElapsedDays
+              .filter((group) => group.elapsed_days !== 8)
+              .map((productsNDaysPassed) => {
                 return (
                   <div
                     className="a-card"
@@ -173,6 +201,7 @@ export default function Products({
                       productsNDaysPassed={productsNDaysPassed}
                       elapsedDaysId={elapsedDaysId}
                       countProductsGroupedBy={countProductsGroupedBy}
+                      productDeadlineDay={productDeadlineDay}
                     />
                     <div className="card-list">
                       <div className="card-list__items">
@@ -192,12 +221,14 @@ export default function Products({
                     </div>
                   </div>
                 )
-              }
-            )}
+              })}
             <UnconfirmedLink label={unconfirmedLinksName()} />
           </div>
 
-          <ElapsedDays countProductsGroupedBy={countProductsGroupedBy} />
+          <ElapsedDays
+            countProductsGroupedBy={countProductsGroupedBy}
+            productDeadlineDay={productDeadlineDay}
+          />
         </div>
       </div>
     )
@@ -207,21 +238,22 @@ export default function Products({
 function ProductHeader({
   productsNDaysPassed,
   elapsedDaysId,
-  countProductsGroupedBy
+  countProductsGroupedBy,
+  productDeadlineDay
 }) {
   let headerClass = 'card-header a-elapsed-days'
-  if (productsNDaysPassed.elapsed_days === 5) {
+  if (productsNDaysPassed.elapsed_days === productDeadlineDay) {
     headerClass += ' is-reply-warning'
-  } else if (productsNDaysPassed.elapsed_days === 6) {
+  } else if (productsNDaysPassed.elapsed_days === productDeadlineDay + 1) {
     headerClass += ' is-reply-alert'
-  } else if (productsNDaysPassed.elapsed_days >= 7) {
+  } else if (productsNDaysPassed.elapsed_days >= productDeadlineDay + 2) {
     headerClass += ' is-reply-deadline'
   }
 
   const headerLabel = () => {
     if (productsNDaysPassed.elapsed_days === 0) {
       return '今日提出'
-    } else if (productsNDaysPassed.elapsed_days === 7) {
+    } else if (productsNDaysPassed.elapsed_days === productDeadlineDay + 2) {
       return `${productsNDaysPassed.elapsed_days}日以上経過`
     } else {
       return `${productsNDaysPassed.elapsed_days}日経過`

app/javascript/products.js

@@ -9,14 +9,18 @@ document.addEventListener('DOMContentLoaded', () => {
     const title = products.getAttribute('data-title')
     const isMentor = products.getAttribute('data-mentor-login')
     const currentUserId = Number(products.getAttribute('data-current-user-id'))
+    const productDeadlineDays = Number(
+      products.getAttribute('data-product-deadline-days')
+    )
     new Vue({
       store,
       render: (h) =>
         h(Products, {
           props: {
             title: title,
             isMentor: isMentor === 'true',
-            currentUserId: currentUserId
+            currentUserId: currentUserId,
+            productDeadlineDays: productDeadlineDays
           }
         })
     }).$mount(selector)