[Redmine] 開始日が過ぎたチケットはCSSで装飾してお知らせするカスタマイズ方法

先日、期日がきたチケットは色を変えてお知らせするカスタマイズ方法をご紹介しましたが、今回は、開始日を過ぎたチケットに、CSSで装飾をしてお知らせするカスタマイズ方法をご紹介したいと思います。

チケットの期日をお知らせするのも重要ですが、逆に、開始日が来たこともチケット一覧でお知らせしてくれれば、もう一歩便利になりますよね!

CSSを追加できるプラグイン

今回もCSSを追加できるプラグイン「View Customize」を使用しますので、導入していることが前提となります。

まだ導入していない場合は、下記記事の「View Customizeのインストール」という項目をご参照ください。

Redmineのチケット一覧表示は、デフォルトの状態では過ぎてしまった期日が赤く表示される以外、特に強調表示や色を変えての表示はありません。 期日当日のチケッ...

プラグインが導入できましたら、カスタマイズを行っていきます。

Redmine側の設定ファイルを編集

開始日の日付と、現在の日付を比較し、現在の日付が開始日と同じ、もしくはそれ以降の場合に、特定のclassを付与する処理を追加します。

ここでは、開始日当日以降のチケットに「start_days」というクラス名を付与してみます。

cd /var/lib/redmine/app/models
vi issue.rb

920行目のあたりにある下記処理の後に追加します。期日がきたチケットを装飾するための処理「overdue_days_before」も一緒に記述しています。

# Returns true if the issue is overdue
def overdue?
  due_date.present? && (due_date < User.current.today) && !closed?
end

def overdue_days_before(days_before)
  due_date.present? && (due_date < User.current.today.since(days_before.days)) && !overdue?  && !closed?
end

#------ Add Start
def start_days_after(days_after)
  start_date.present? && ((start_date - 1 ) < User.current.today.since(days_after.days)) && !closed?
end
#------ Add End

1360行目のあたりにある下記処理の途中に追加します。こちらも同様に、期日がきたチケットを装飾するための処理が入っています。

# Returns a string of css classes that apply to the issue
def css_classes(user=User.current)
  s = +"issue tracker-#{tracker_id} status-#{status_id} #{priority.try(:css_classes)}"
  s << ' closed' if closed?
  s << ' overdue' if overdue?
  s << ' overdue_1day_before' if overdue_days_before(1)
  s << ' overdue_3days_before' if overdue_days_before(3)
#------ Add Start
  s << ' start_days' if start_days_after(0)
#------ Add End
  s << ' child' if child?
  s << ' parent' unless leaf?
  s << ' private' if is_private?
  if user.logged?
    s << ' created-by-me' if author_id == user.id
    s << ' assigned-to-me' if assigned_to_id == user.id
    s << ' assigned-to-my-group' if user.groups.any? {|g| g.id == assigned_to_id}
  end
  s
end

View CustomizeでCSSを追加する

管理者アカウントでログインし、管理メニューの「表示のカスタマイズ」をクリックします。以下のような画面が表示されます。

表示のカスタマイズを追加する

右上の「新しい表示のカスタマイズ」をクリックします。

新しい表示のカスタマイズ(新規設定)画面が表示されますので、以下のように入力します。

パスのパターン/.*
挿入位置全ページのヘッダ
種別CSS
コード.start_days .subject { font-weight: bold; }
.start_days .subject:before { content: "▶ "; color: #169; }
.details .subject:before { content: ""; }

1行目は、開始日当日以降のチケットの題名を太字にします。2行目は、開始日当日以降のチケットの題名に「▶」マークを付与し、開始していることをわかりやすくしています。3行目は、2行目で追加しているマークが、チケットの詳細画面には表示されないように、contentを上書きしています。

コメントはお好みで。有効にはチェックを入れ、プライベートはチェックなしで。

左下の「作成」ボタンをクリックすれば、即座に反映されます。

上部メニューから「プロジェクト」をクリックし、「チケット」タブを開いてみてください。開始日が過ぎているチケットの題名が太字になり、先頭に「▶」マークがついていれば設定完了です。また、チケットの題名をクリックし、詳細画面に入ったとき、題名部分に「▶」がついていないことも確認しましょう。

さいごに

ということで、今回は「開始日当日もしくは開始日が過ぎているチケットの題名に装飾をする」というカスタマイズ方法でした。

お好みで、色を変えてみたり、行全体を太字にしてみたり、CSSを駆使すればいろんなことができるようになりますよ!

初稿:2020年3月28日