TodoAppに期限日をつける 力技で条件分岐させる編

前回に続き期限日機能の実装を行っていく

ただ単にそのまま日付を表示しても面白くないのでちょっといじるよ

オリジナルでメソッドを作ってみた

[ tasks_helper.rb ]

module TasksHelper

  def deadline_count(task)
    today = Date.today
    deadline = task.deadline
    countdown = (deadline - today).numerator
    if countdown == 0
      "今日が期限日のタスクです！"
    elsif countdown.between?(1, 3)
      "期限日まで残り#{countdown}日"
    else
      "期限日:#{l task.deadline}"
    end
  end
end

if タノシス

こんな感じで呼び出します。

[ index.html.slim ]

- private_tasks.each do |private_task|
    .border.index_link.p-1
      .container-md
        = link_to task_path(private_task)
          .row.mb-1
            .text-muted = deadline_count(private_task)  # 追加
          .row.pl-1
            strong = private_task.title
          .row.pl-1
            = private_task.description
          .row.justify-content-end.text-muted
            .pl-2 = private_task.public? ? '公開' : '非公開'
            .pl-2 = private_task.done? ? '完了済' : '実行中'
            .pl-2 = l private_task.created_at

すると・・

タイトルの上に期限日が表示されて、近づくと内容が変化します！！

すごくね？？？？

＊右下のは投稿日です。期限日の方がいいかな？

もう少し弄るぜ

オリジナルでメソッドを作ってみたcss編

私はね。cssをね。動的に? 弄って変化させたいんですよ！！！

そっちの方がカッコいいい！絶対に！

と思ったんですけど全然わからん。いろいろ試しました。

いろいろ試して、

いろいろ試して、

いろいろ試した結果、最終的に閃いた力技がコチラ

[ tasks_helper.rb ]

module TasksHelper

  def deadline_count(task)
    today = Date.today
    deadline = task.deadline
    countdown = (deadline - today).numerator
    if countdown == 0
      "今日が期限日のタスクです！"
    elsif countdown.between?(1, 3)
      "期限日まで残り#{countdown}日"
    else
      "期限日:#{l task.deadline}"
    end
  end

  def deadline_style(task)
    today = Date.today
    deadline = task.deadline
    countdown = (deadline - today).numerator
    if countdown == 0
      "dl-style1"
    elsif countdown.between?(1, 3)
      "dl-style2"
    else
      "dl-style3"
    end
  end
end

同じようなメソッドをもう一個作ってやりましたよ！

えぇ、これを<div>にぶち込んでやりましょう

すごい似てるから合体させようと頑張ったんですが、うまくいかず・・

調べた限りこんなコード書いてる人は誰もいないです。笑

とりあえずこれでよしとする！

viewで表示しよう

[ index.html.slim ]

  - private_tasks.each do |private_task|
    .border.index_link.p-1
      .container-md
        = link_to task_path(private_task)
          .row.mb-1
            div class="text-muted #{deadline_style(private_task)}" = deadline_count(private_task)
          .row.pl-1
            strong = private_task.title
          .row.pl-1
            = private_task.description
          .row.justify-content-end.text-muted
            .pl-2 = private_task.public? ? '公開' : '非公開'
            .pl-2 = private_task.done? ? '完了済' : '実行中'
            .pl-2 = l private_task.created_at

これも結構悩みました！

slimでの埋め込みがよくわからなくて。でもこれで行けます

すごくね？？？

これも忘れずに、、

[ javascript/src/style.scss ]

/* Deadline Style*/
.dl-style1 {
  background: linear-gradient(transparent 70%, #ff99ab 70%);
}
.dl-style2 {
  background: linear-gradient(transparent 70%, #f8e58c 70%);
}
.dl-style3 {
  background: linear-gradient(transparent 70%, #f3f3f3 70%);
}

個別ページでやるときは引数変えないとネ！

div class="text-muted #{deadline_style(@task)}" = deadline_count(@task)

カッコいいいい