diff --git a/app/javascript/products.vue b/app/javascript/products.vue
index a1d7164cefa..984cb60edf6 100644
--- a/app/javascript/products.vue
+++ b/app/javascript/products.vue
@@ -88,13 +88,6 @@
//- ダッシュボード
div(v-else-if='isDashboard')
- select(v-on:change='onDaysSelectChange($event)')
- option(value='', disabled, selected, hidden) 未アサインの提出物の経過日数を選択
- option(value='1') 1日経過 2日経過 3日以上経過
- option(value='2') 2日経過 3日経過 4日以上経過
- option(value='3') 3日経過 4日経過 5日以上経過
- option(value='4') 4日経過 5日経過 6日以上経過
- option(value='5') 5日経過 6日経過 7日以上経過
template(v-for='product_n_days_passed in productsGroupedByElapsedDays')
.a-card.h-auto(
v-if='!isDashboard || (isDashboard && product_n_days_passed.elapsed_days >= 0 && product_n_days_passed.elapsed_days <= selectedDays + 2)')
@@ -139,7 +132,6 @@ div(v-else-if='isDashboard')
span.card-header__count(v-if='selectedTab === "unassigned"')
| ({{ countProductsGroupedBy(product_n_days_passed) }})
//- 共通化ここまで
-
.card-list
.card-list__items
product(
@@ -162,6 +154,43 @@ div(v-else-if='isDashboard')
v-bind:href='`/products/unassigned#${selectedDays}days-elapsed`',
v-else)
| {{ countAlmostPassedSelectedDays() }}件の提出物が、
8時間以内に{{ selectedDays }}日経過に到達します。
+ p.mt-4.text-sm.text-center
+ label.a-text-link(for='modal-on-days-select')
+ | 提出物チェックの期限を変更する。
+ input.a-toggle-checkbox#modal-on-days-select(type='checkbox')
+ .modal
+ label.modal__overlay(for='modal-on-days-select')
+ .modal-content
+ .modal-header
+ h2.modal-title
+ | 提出物チェックの期限を変更する。
+ label.modal-header__close(for='modal-on-days-select')
+ .modal-body
+ .modal__description.is-md
+ .a-short-text
+ p
+ | 現在の提出物チェックの期限は{{ selectedDays + 2 }}日(
+ span.a-inline-block.is-reply-warning
+ | {{ selectedDays }}日経過
+ | 、
+ span.a-inline-block.is-reply-alert
+ | {{ selectedDays + 1 }}日経過
+ | 、
+ span.a-inline-block.is-reply-deadline
+ | {{ selectedDays + 2 }}日以上経過
+ | )に設定されています。
+ | この変更はメンター全員の画面、Discordでの通知に影響します。
+ .form.mt-6.mx-auto.max-w-xs
+ .form__items
+ .form-item
+ .a-button.is-md.is-secondary.is-select.is-block
+ select(v-on:change='onDaysSelectChange($event)')
+ option(value='', disabled, selected, hidden) 提出物チェックの期限日数を変更する。
+ option(value='1') 期限3日(1日経過 2日経過 3日以上経過)
+ option(value='2') 期限4日(2日経過 3日経過 4日以上経過)
+ option(value='3') 期限5日(3日経過 4日経過 5日以上経過)
+ option(value='4') 期限6日(4日経過 5日経過 6日以上経過)
+ option(value='5') 期限7日(5日経過 6日経過 7日以上経過)
//- 全て, 未完了
.page-content.is-products(v-else)
diff --git a/app/javascript/stylesheets/_common-imports.sass b/app/javascript/stylesheets/_common-imports.sass
index cd4e37283c1..f49d0e9c268 100644
--- a/app/javascript/stylesheets/_common-imports.sass
+++ b/app/javascript/stylesheets/_common-imports.sass
@@ -125,6 +125,7 @@
@import "atoms/a-file-insert"
@import "atoms/a-icon-label"
@import "atoms/a-side-nav"
+@import "atoms/a-inline-block"
////////////
// layouts
diff --git a/app/javascript/stylesheets/atoms/_a-inline-block.sass b/app/javascript/stylesheets/atoms/_a-inline-block.sass
new file mode 100644
index 00000000000..6f0cf6d2c89
--- /dev/null
+++ b/app/javascript/stylesheets/atoms/_a-inline-block.sass
@@ -0,0 +1,18 @@
+.a-inline-block
+ font-size: .875em
+ display: inline-block
+ border: solid 1px
+ padding: .0625em .25em
+ border-radius: 4px
+ margin-inline: .25em
+ &.is-reply-warning
+ background-color: var(--reply-warning-background)
+ border-color: var(--reply-warning-border)
+ &.is-reply-alert
+ color: var(--reversal-text)
+ background-color: var(--reply-alert-background)
+ border-color: var(--reply-alert-border)
+ &.is-reply-deadline
+ color: var(--reversal-text)
+ background-color: var(--reply-deadline-background)
+ border-color: var(--reply-deadline-border)