という要望があったのでやってみました。

聞いたところ「チケット作成時には値が定まらないので必須入力では困るが、最終的に集計時に入力が漏れていると困る」という感じでした。この問題に対するアプローチはいくつかあると思うのですが、とりあえず見た目を変えて未入力であることをアッピールするというのが最も手っ取り早い方法だと思った(効き目は薄いと思う)のでとりあえず試してみました。

環境


Redmine 3.3.2です。また、いつも通りview customize pluginを使用させて頂きます。

要件


チケット編集開始時点・作成開始時点で未入力の特定の項目の見た目を変えるようにします。こういうのは通常はフォーカスや入力の有無で見た目を変えたりしますが、そういうことはしません。あくまで作成・編集開始時点で見た目が変わっているとすると保存するまでそのままの見た目とします。

こうした理由ですが下記のとおりです。

  • テーマによって色が違ったりすると思うので入力前後でそれを保持して戻すのがめんどくさい
  • フォーカス状況とかのコードを書くのが手間

要するに実装がめんどくさいからです。顧客向けでもないのでそこまでこだわるようなものでもないでしょう。後は入力状況に応じて見た目を変えるというのは多少はコンピューティングリソースを使うと思います。まあ微々たるものだと思いますが。要するに実装がめんどくさいからやりません。必要最低限が大事です。

設定内容


view customize pluginで下記のように設定します。

Path Pattern

1
/issues

Code

まず、初めに「予定工数」が未入力の場合に枠線を赤にしてみましょうか。こんなイメージですね。

こいつを実現するには下記のように書けばよいです。

1
2
3
4
5
6
$(function(){
if ($('#issue_estimated_hours').val().length !== 0) {
return;
}
$('#issue_estimated_hours').css({border: '2px solid #d70035'});
});

もう一つぐらいサンプルを。「バージョン」が未選択の場合は背景色を赤にしてみましょうか。こんなイメージですね。

こいつを実現するには下記のように書けばよいです。

1
2
3
4
5
6
$(function(){
if ($('#issue_fixed_version_id').length === 0) {
return;
}
$('#issue_fixed_version_id').css({backgroundColor: '#d65676'});
});

まあ、要するに各フィールドのidを開発者ツールで確認して、CSSをJQueryでいじればいいわけです。ちょろいですね。フォーカスの有無や入力の有無で変更しようと思えば、その辺りの条件をちょろっと入れればいいでしょう。view customize pluginは相変わらず素晴らしいですね。