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)