アラートの期限を変更した時に/products/unassignedで表示するアラート、提出物が変更されるようにした

fjordllc · Jun 3, 2024 · 4f7bfff · 4f7bfff
1 parent 054c644
commit 4f7bfff
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 21 deletions.
diff --git a/app/controllers/products/unassigned_controller.rb b/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 = ProductDeadline.first_or_create(alert_day: 4).alert_day
+  end
 end
diff --git a/app/javascript/components/ElapsedDays.jsx b/app/javascript/components/ElapsedDays.jsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-export default function ElapsedDays({ countProductsGroupedBy }) {
+export default function ElapsedDays({ countProductsGroupedBy, productDeadlineDay }) {
   const activeClass = (quantity) => {
     return quantity ? 'is-active' : 'is-inactive'
   }
@@ -11,35 +11,35 @@ export default function ElapsedDays({ countProductsGroupedBy }) {
         <ol className="page-nav__items elapsed-days">
           <li
             className={`page-nav__item is-reply-deadline border-b-0 ${activeClass(
-              countProductsGroupedBy(6)
+              countProductsGroupedBy(productDeadlineDay + 2)
             )}`}>
             <a className="page-nav__item-link" href="#6days-elapsed">
               <span className="page-nav__item-link-inner">
-                6日以上経過{` (${countProductsGroupedBy(6)})`}
+                {productDeadlineDay + 2}日以上経過{` (${countProductsGroupedBy(productDeadlineDay + 2)})`}
               </span>
             </a>
           </li>
           <li
             className={`page-nav__item is-reply-alert border-b-0 ${activeClass(
-              countProductsGroupedBy(5)
+              countProductsGroupedBy(productDeadlineDay + 1)
             )}`}>
             <a className="page-nav__item-link" href="#5days-elapsed">
               <span className="page-nav__item-link-inner">
-                5日経過{` (${countProductsGroupedBy(5)})`}
+              {productDeadlineDay + 1}日経過{` (${countProductsGroupedBy(productDeadlineDay + 1)})`}
               </span>
             </a>
           </li>
           <li
             className={`page-nav__item is-reply-warning border-b-0 ${activeClass(
-              countProductsGroupedBy(4)
+              countProductsGroupedBy(productDeadlineDay)
             )}`}>
             <a className="page-nav__item-link" href="#4days-elapsed">
               <span className="page-nav__item-link-inner">
-                4日経過{` (${countProductsGroupedBy(4)})`}
+              {productDeadlineDay}日経過{` (${countProductsGroupedBy(productDeadlineDay)})`}
               </span>
             </a>
           </li>
-          {[3, 2, 1].map((passedDay) => {
+          {Array.from({ length: productDeadlineDay - 1 }, (_, index) => index + 1).reverse().map((passedDay) => {
             return (
               <li
                 key={passedDay}

diff --git a/app/javascript/components/Products.jsx b/app/javascript/components/Products.jsx
@@ -13,7 +13,8 @@ export default function Products({
   selectedTab,
   isMentor,
   isAdmin,
-  currentUserId
+  currentUserId,
+  productDeadlineDay
 }) {
   const { page, setPage } = usePage()
 
@@ -62,13 +63,13 @@ export default function Products({
     data.productsGroupedByElapsedDays.forEach((group) => {
       elapsedDays.push(group.elapsed_days)
     })
-    return elapsedDays.every((day) => day < 4)
+    return elapsedDays.every((day) => day < productDeadlineDay)
   }
 
   const updateElapsedDays = (productsGroupedByElapsedDays) => {
     const updateElapsedDays = []
     productsGroupedByElapsedDays.forEach((group) => {
-      const elapsedDays = group.elapsed_days >= 6 ? 6 : group.elapsed_days
+      const elapsedDays = group.elapsed_days >= productDeadlineDay + 2 ? productDeadlineDay + 2 : group.elapsed_days
       let existingGroup = updateElapsedDays.find(
         (g) => g.elapsed_days === elapsedDays
       )
@@ -123,7 +124,7 @@ export default function Products({
         <div className="o-empty-message__icon">
           <i className="fa-regular fa-smile" />
         </div>
-        <p className="o-empty-message__text">4日経過した提出物はありません</p>
+        <p className="o-empty-message__text">{productDeadlineDay}日経過した提出物はありません</p>
       </div>
     )
   } else if (selectedTab !== 'unassigned') {
@@ -188,7 +189,7 @@ export default function Products({
         <div className="page-body__columns">
           <div className="page-body__column is-main">
             {data.products_grouped_by_elapsed_days
-              .filter((group) => group.elapsed_days !== 7)
+              .filter((group) => group.elapsed_days !== 8)
               .map((productsNDaysPassed) => {
                 return (
                   <div
@@ -198,6 +199,7 @@ export default function Products({
                       productsNDaysPassed={productsNDaysPassed}
                       elapsedDaysId={elapsedDaysId}
                       countProductsGroupedBy={countProductsGroupedBy}
+                      productDeadlineDay={productDeadlineDay}
                     />
                     <div className="card-list">
                       <div className="card-list__items">
@@ -221,7 +223,10 @@ export default function Products({
             <UnconfirmedLink label={unconfirmedLinksName()} />
           </div>
 
-          <ElapsedDays countProductsGroupedBy={countProductsGroupedBy} />
+          <ElapsedDays
+            countProductsGroupedBy={countProductsGroupedBy}
+            productDeadlineDay={productDeadlineDay}
+          />
         </div>
       </div>
     )
@@ -231,21 +236,22 @@ export default function Products({
 function ProductHeader({
   productsNDaysPassed,
   elapsedDaysId,
-  countProductsGroupedBy
+  countProductsGroupedBy,
+  productDeadlineDay
 }) {
   let headerClass = 'card-header a-elapsed-days'
-  if (productsNDaysPassed.elapsed_days === 4) {
+  if (productsNDaysPassed.elapsed_days === productDeadlineDay) {
     headerClass += ' is-reply-warning'
-  } else if (productsNDaysPassed.elapsed_days === 5) {
+  } else if (productsNDaysPassed.elapsed_days === productDeadlineDay + 1) {
     headerClass += ' is-reply-alert'
-  } else if (productsNDaysPassed.elapsed_days >= 6) {
+  } else if (productsNDaysPassed.elapsed_days >= productDeadlineDay + 2) {
     headerClass += ' is-reply-deadline'
   }
 
   const headerLabel = () => {
     if (productsNDaysPassed.elapsed_days === 0) {
       return '今日提出'
-    } else if (productsNDaysPassed.elapsed_days === 6) {
+    } else if (productsNDaysPassed.elapsed_days === productDeadlineDay + 2) {
       return `${productsNDaysPassed.elapsed_days}日以上経過`
     } else {
       return `${productsNDaysPassed.elapsed_days}日経過`

diff --git a/app/views/products/unassigned/index.html.slim b/app/views/products/unassigned/index.html.slim
@@ -12,4 +12,4 @@ header.page-header
 
 .page-body
   .container.is-lg
-    = react_component('Products', title: title, selectedTab: 'unassigned', isMentor: mentor_login?, isAdmin: admin_login?, currentUserId: current_user.id)
+    = react_component('Products', title: title, selectedTab: 'unassigned', isMentor: mentor_login?, isAdmin: admin_login?, currentUserId: current_user.id, productDeadlineDay: @product_deadline_day)