未アサインの提出物一覧で、1日, 2日, 3日ラインと4日ラインも追加したい

[komagata]

検討中。

現在5, 6, 7日ラインを表示している。5日ラインを超えた提出物はほぼ処理できている。

しかし、5日かけて処理しているわけではなく、5日を超えた時点で処理している（感がある）ので、実質ほとんどは1日で処理していてもしものための2〜3日があるという感じ。

これは5日を超えたものを処理するのも3日を超えたものを処理するもの負担は変わらない可能性がある。（メンターの負担が変わらず、生徒の方の体験は向上する）

これを変更する前に、3, 4日ラインを追加して対応できるか試してみるのも良さそうと思いIssue登録しました。

[komagata]

@machida こちらいかがですかね〜。もし問題なければメンターの皆さんに聞いてみてから実装してみるのもいいかな〜と思いました。

[machida]

@komagata

これ、僕も付けたいと思ってました。
3, 4日ラインだけでなく、1, 2, 3, 4日出してしまってもいいかと思ってます。

• 現在5, 6, 7日ラインは目立つ色がついているので、1, 2, 3, 4日白背景かグレイ背景で目立たない色にしたい。
• ラインには合計数も表示したい。例: 5日経過(3) のように。
• ラインのマークアップがHTML的におかしいので修正したい（machidaが指示します）。

このようにしたいと思います。
これで、メンターの皆さんに連絡しておきますー

[machida]

別Issueでn日経過に飛べるページ内リンクの設置も作りたいと思います。

[machida]

今のマークアップ

<div class="thread-list a-card">
  <div class="thread-list__items">
    <div class="thread-list-item has-assigned">
      <div class="thread-list-item__strip-label">
        <div class="thread-list-item__elapsed-days is-reply-alert is-only-mentor">6日経過</div>
      </div>
      <div class="thread-list-item__inner">
        <div class="thread-list-item__rows">
          <div class="thread-list-item__row">
            <div class="thread-list-item-title">
              <div class="thread-list-item__notresponded"></div>
              <div class="thread-list-item-title__start">
              </div>
              <h2 itemprop="name" class="thread-list-item-title__title"><a
                  href="http://localhost:3000/products/738574079" itemprop="url"
                  class="thread-list-item-title__link js-unconfirmed-link">Terminalの基礎を覚えるの提出物</a></h2>
            </div>
          </div>
          <div class="thread-list-item__row">
            <div class="thread-list-item-meta">
              <div class="thread-list-item-meta__items">
                <div class="thread-list-item-meta__item"><a href="http://localhost:3000/users/991528156"
                    class="a-user-name">kimura</a></div>
              </div>
            </div>
          </div>
          <div class="thread-list-item__row">
            <div class="thread-list-item-meta">
              <div class="thread-list-item-meta__items">
                <div class="thread-list-item-meta__item"><time class="a-meta"><span
                      class="a-meta__label">提出日</span>2022年02月14日(月) 22:01</time></div>
                <div class="thread-list-item-meta__item"><time class="a-meta"><span
                      class="a-meta__label">更新</span>2022年02月19日(土) 22:01</time></div>
              </div>
            </div>
          </div>
        </div>
        <div class="thread-list-item__assignee is-only-mentor"><button class="a-button is-block is-secondary is-sm"><i
              class="fas fa-hand-paper"></i>担当する</button></div>
        <div class="thread-list-item__user"><a href="http://localhost:3000/users/991528156" class="a-user-name"><img
              title="kimura (Kimura Tadasi)" alt="kimura (Kimura Tadasi)" src="/images/users/avatars/default.png"
              class="thread-list-item__user-icon a-user-icon is-student"></a></div>
      </div>
    </div>
    <div class="thread-list-item has-assigned">
      <div class="thread-list-item__strip-label">
        <div class="thread-list-item__elapsed-days is-reply-deadline is-only-mentor">7日以上経過</div>
      </div>
      <div class="thread-list-item__inner">
        <div class="thread-list-item__rows">
          <div class="thread-list-item__row">
            <div class="thread-list-item-title">
              <div class="thread-list-item__notresponded"></div>
              <div class="thread-list-item-title__start">
              </div>
              <h2 itemprop="name" class="thread-list-item-title__title"><a
                  href="http://localhost:3000/products/890040135" itemprop="url"
                  class="thread-list-item-title__link js-unconfirmed-link">PC性能の見方を知るの提出物</a></h2>
            </div>
          </div>
          <div class="thread-list-item__row">
            <div class="thread-list-item-meta">
              <div class="thread-list-item-meta__items">
                <div class="thread-list-item-meta__item"><a href="http://localhost:3000/users/609827778"
                    class="a-user-name">sotugyou</a></div>
              </div>
            </div>
          </div>
          <div class="thread-list-item__row">
            <div class="thread-list-item-meta">
              <div class="thread-list-item-meta__items">
                <div class="thread-list-item-meta__item"><time class="a-meta"><span
                      class="a-meta__label">提出日</span>2022年02月13日(日) 22:01</time></div>
                <div class="thread-list-item-meta__item"><time class="a-meta"><span
                      class="a-meta__label">更新</span>2022年02月19日(土) 22:01</time></div>
              </div>
            </div>
          </div>
        </div>
        <div class="thread-list-item__assignee is-only-mentor"><button class="a-button is-block is-secondary is-sm"><i
              class="fas fa-hand-paper"></i>担当する</button></div>
        <div class="thread-list-item__user"><a href="http://localhost:3000/users/609827778" class="a-user-name"><img
              title="sotugyou (卒業 太郎)" alt="sotugyou (卒業 太郎)" src="/images/users/avatars/default.png"
              class="thread-list-item__user-icon a-user-icon is-graduate"></a></div>
      </div>
    </div>
  </div>
</div>

こうしたい

<div class="thread-list a-card">
  <div class="thread-list-item__elapsed-days is-reply-alert is-only-mentor">6日経過</div>
  <div class="thread-list__items">
    <div class="thread-list-item has-assigned">
      <div class="thread-list-item__inner">
        <div class="thread-list-item__rows">
          <div class="thread-list-item__row">
            <div class="thread-list-item-title">
              <div class="thread-list-item__notresponded"></div>
              <div class="thread-list-item-title__start">
              </div>
              <h2 itemprop="name" class="thread-list-item-title__title"><a
                  href="http://localhost:3000/products/738574079" itemprop="url"
                  class="thread-list-item-title__link js-unconfirmed-link">Terminalの基礎を覚えるの提出物</a></h2>
            </div>
          </div>
          <div class="thread-list-item__row">
            <div class="thread-list-item-meta">
              <div class="thread-list-item-meta__items">
                <div class="thread-list-item-meta__item"><a href="http://localhost:3000/users/991528156"
                    class="a-user-name">kimura</a></div>
              </div>
            </div>
          </div>
          <div class="thread-list-item__row">
            <div class="thread-list-item-meta">
              <div class="thread-list-item-meta__items">
                <div class="thread-list-item-meta__item"><time class="a-meta"><span
                      class="a-meta__label">提出日</span>2022年02月14日(月) 22:01</time></div>
                <div class="thread-list-item-meta__item"><time class="a-meta"><span
                      class="a-meta__label">更新</span>2022年02月19日(土) 22:01</time></div>
              </div>
            </div>
          </div>
        </div>
        <div class="thread-list-item__assignee is-only-mentor"><button class="a-button is-block is-secondary is-sm"><i
              class="fas fa-hand-paper"></i>担当する</button></div>
        <div class="thread-list-item__user"><a href="http://localhost:3000/users/991528156" class="a-user-name"><img
              title="kimura (Kimura Tadasi)" alt="kimura (Kimura Tadasi)" src="/images/users/avatars/default.png"
              class="thread-list-item__user-icon a-user-icon is-student"></a></div>
      </div>
    </div>
  </div>

  <div class="thread-list a-card">
    <div class="thread-list-item__elapsed-days is-reply-alert is-only-mentor">6日経過</div>
    <div class="thread-list__items">
      <div class="thread-list-item has-assigned">
        <div class="thread-list-item__inner">
          <div class="thread-list-item__rows">
            <div class="thread-list-item__row">
              <div class="thread-list-item-title">
                <div class="thread-list-item__notresponded"></div>
                <div class="thread-list-item-title__start">
                </div>
                <h2 itemprop="name" class="thread-list-item-title__title"><a
                    href="http://localhost:3000/products/890040135" itemprop="url"
                    class="thread-list-item-title__link js-unconfirmed-link">PC性能の見方を知るの提出物</a></h2>
              </div>
            </div>
            <div class="thread-list-item__row">
              <div class="thread-list-item-meta">
                <div class="thread-list-item-meta__items">
                  <div class="thread-list-item-meta__item"><a href="http://localhost:3000/users/609827778"
                      class="a-user-name">sotugyou</a></div>
                </div>
              </div>
            </div>
            <div class="thread-list-item__row">
              <div class="thread-list-item-meta">
                <div class="thread-list-item-meta__items">
                  <div class="thread-list-item-meta__item"><time class="a-meta"><span
                        class="a-meta__label">提出日</span>2022年02月13日(日) 22:01</time></div>
                  <div class="thread-list-item-meta__item"><time class="a-meta"><span
                        class="a-meta__label">更新</span>2022年02月19日(土) 22:01</time></div>
                </div>
              </div>
            </div>
          </div>
          <div class="thread-list-item__assignee is-only-mentor"><button class="a-button is-block is-secondary is-sm"><i
                class="fas fa-hand-paper"></i>担当する</button></div>
          <div class="thread-list-item__user"><a href="http://localhost:3000/users/609827778" class="a-user-name"><img
                title="sotugyou (卒業 太郎)" alt="sotugyou (卒業 太郎)" src="/images/users/avatars/default.png"
                class="thread-list-item__user-icon a-user-icon is-graduate"></a></div>
        </div>
      </div>
    </div>
  </div>

[machida]

今、n日経過 のラインがリストの中に入ってしまっています。リストの外にだし、そのラインの下にリストが始まる、という形に変更をしたいですー

[komagata]

@machida メンターチャンネルへの連絡ありがとうございます〜！

[Aseiide]

要件

現在5, 6, 7日ラインは目立つ色がついているので、1, 2, 3, 4日白背景かグレイ背景で目立たない色にしたい。
ラインには合計数も表示したい。例: 5日経過(3) のように。
ラインのマークアップがHTML的におかしいので修正したい（machidaが指示します）。

自分がやること

メインタスク

• 「1日経過」「2日経過」「3日経過」「4日経過」が分かるようにする
  • デザインはmachidaさんに依頼

オプション

• それぞれ、「N日経過(5)」のように合計数を表示する 別issueに切り出した
• 現在、リストの中に見出しが入ってしまっているので、それを外に出す

<div class="thread-list-item__elapsed-days is-reply-alert is-only-mentor">6日経過</div>
クラス名は別にしたい。thread-list-title

[machida]

関連 Issue #4345

[Aseiide]

@machida (cc: @cafedomancer )
実装している段階で、「こうした方がいいのでは？？」ということがあったので相談と共有です。
「1,2,3,4,5,6,7日経過のライン」を追加すると、伊藤さんが立ててくださっている issue#3109 の問題がより顕著になるような気がします。
そもそもこの気持ち悪さは、グループの基準になっている値が提出物それぞれに対して出ていないので、人間にはその判断がつかないところから来ているのではないかと思いました。
経過日時を出してみると良いのでは？と思い、１つずつの提出物に対して「相対的な経過日時」を出してみました。
こうすると、issue#3109の問題もわかりやすくなる？かなと思うのですが、デザイン面での町田さんの意見を伺いたいなと思っていますが、いかがでしょう？？
ref: #3109

[machida]

@Aseiide
提案ありがとうございます！なるほど、ここの文言の意図を直観的にするために、次の経過日数まで残りxx時間を表示したいと思います。

例えば、経過日数6日にある提出物に、次の経過日数まで3.5時間と表示されると、メンターはこの提出物は3.5時間後には経過日数5日のエリアに移動される、というのがわかりやすくなりそうです。

次の経過日数まで残り3.5時間、と表示されれば一番わかりやすいのですが、長いんですよねー。経過日数3.5時間、ではわかりにくい。
次の経過日数:3.5時間後、
次の計画日数まで3.5時間、
もなんかいまいちな感じはしています。
文言を考えてみます。

[Aseiide]

@machida
承知しました。デザイン、文言決まったら連絡ください。
その間、マークアップの修正をしておきます！

[Aseiide]

質問タイム　メモ
次の経過日数までxx時間　という文言を表示する
時間の表示はざっくりで大丈夫

[Aseiide]

@machida
質問タイムではありがとうございました〜。
町田さんのおっしゃるように、「次の経過日数までxx時間」という文言を表示するばあい、7日以上経過したものに対しては意味を為さないと思いました。
なぜなら、現状「10日経過」や「14日経過」といった7日以上のラベル(グループ)が存在せず、文言とマッチしないと思ったからです。
この点、いかがでしょう？

[machida]

@Aseiide
最後のグループまで到達してるものは非表示でお願いしますー

[Aseiide]

@machida
承知しました。
仮で文言入れてみましたが、「提出日：」「更新：」「次の経過日数まで：」をすべてそれぞれの提出物に含める感じで良いですかね??

要件(自分用のメモ)

• 「経過日数」は次のラベル(グループ)に移動する時間を表示する。
  • 例えば、3/10 18:00提出の提出物であれば、「4日経過」のところに今ある。「5日経過」のラベルに到達するのは24時間後？なのかAM0時が基準で、「次の経過日数まで：6時間」と表示すればよいのか？

ここまで書いて直接話して仕様を詰めた方がよさそうなので、町田さんに直接相談する

[Aseiide]

更新を起点に計算する

* 3日経過のポイント
* now
* 4日経過のポイント
(updated_at + 24 * 4) - now 
(updated_at + 次のポイントの日数) - now

[Aseiide]

関連issueへのリンク

• 次の経過日数までの時間を表示したい #4400
• n日経過日数に提出物数を表示したい #4401
  • 【メンター向け】「n日経過」の部分に件数を入れたい #4345

[Aseiide]

メモ
仮に3日経過のラベルに 3/13 18:00があれば、今を23時と仮定したとき、次の経過日数まで18時間を表示する

[Aseiide]

本番環境で確認できたのでcloseします！