view customize pluginでさらに遊ぶ。そうだ、Redmineに投票機能を付けよう。

Redmine Advent Calendar 2021　23日目参加です。
今年はRedmineに関する昔の話を書こうかと思ったのですが、もう少し楽しすぎるview customize plugin ¹に関するネタがあるので書き留めておきます。
ちなみに相変わらずバージョンは上がらずネタも古いです。
でも楽しかったので記す。

今回機能は、【Redmineのカスタムフィールドに＋１ボタン的なものを追加する】 @tanahashi_kei）さんの記事を参考にさせていただきました。
ありがとうございます。²

#目次
1.まずはカスタムフィールドを用意する
2.編集画面に入らなくて投票できるようにしたい
3.新規チケット作成時から投票したい
4.おしまいに

---

#1. カスタムフィールド作成 ³
こんな感じで作成。

参考先様【Redmineのカスタムフィールドに＋１ボタン的なものを追加する】 に従って、さくっとラベルボタンまで追加。

#2. 投票ボタンを追加しよう
こんな感じの投票ボタンを作ります。

###2-1. まずは箱をつくる

qiita.javascript

PathPattern://issues/[0-9]+
Type:CSS
挿入位置:チケット詳細の下
/* Good */
button.button1 {
  width:100px;
  height:30px;
  line-height:30px;
  text-align:center;
  font-size: 12pt;
  text-decoration: none;
  background: #fffffe;
  color: #67c5ff;
  border: solid 1px #67c5ff;
  border-radius: 3px;
  transition: .4s;
}

button.button1:hover {
  background: #67c5ff;
  color: white;
}

/* フォーカスの青枠排除 */
button.button1:focus {
	outline:0;
}

/* No Good */
button.button2 {
  width:100px;
  height:30px;
  line-height:30px;
  text-align:center;
  font-size: 12pt;
  text-decoration: none;
  background: #fffffe;
  color: #FF6786;
  border: solid 1px #FF6786;
  border-radius: 3px;
  transition: .4s;
}

button.button2:hover {
  background: #FF6786;
  color: white;
}

/* フォーカスの青枠排除 */
button.button2:focus {
	outline:0;
}

###2-2. チケット詳細画面にぺたり

qiita.javascript

PathPattern://issues/[0-9]+
Type:JavaScript
プロジェクトのパターン:redmine_req
$(function () {
    /* 投票用カスタムフィールドがある場合のみ適用 */
    if (!$(".cf_1 div").length) {
        return;
    }

    /* チケット詳細画面に投票ボタン「Good」「No Good」追加 */
    $('div.subject').before('<button id="btn1" class="button1" title="この機能欲しい！">Good</button>');
    $('#btn1').click(function () {
        update_good();
    });

    $('div.subject').before('<button id="btn2" class="button2" title="別にいらない">No Good</button><div>　</div>');
    $('#btn2').click(function () {
        downdate_bad();
    });

 var changeCustomFieldPositon = function(){
   /* 編集画面処理 */
   var field = $('#issue_custom_field_values_1');
   field.hide();

   /* チケット詳細画面に投票ボタン「＋」「－」追加 */
   var plus_btn = '<button type="button" class="count_up_btn">+1</button>';
   field.after(plus_btn);
   
   var minus_btn = '<button type="button" class="count_down_btn">-1</button>';
   $('.count_up_btn').after(minus_btn);

   /* テキスト枠をラベル化する、ベタ打ちで書き換えさせないぞ */
   var count = ' : <span class="issue_custom_field_values_1_label">'+ field.val() +'</span>';
   $('.count_down_btn').after(count)

   $('.count_up_btn').on('click', function () {
     var label = $('.issue_custom_field_values_1_label');
     var num = Number(field.val()) + 1;
     field.val(num);
     label.text(num);
   });

   $('.count_down_btn').on('click', function () {
     var label = $('.issue_custom_field_values_1_label');
     var num = Number(field.val());

     if(num > 0){
        var num = Number(field.val()) - 1;
     }
     field.val(num);
     label.text(num);
   });
 };

  /* 初期変換 */
  changeCustomFieldPositon();

  /* ステータス変更時など、DOMが差し替えられるたびに実施 */
  var _replaceIssueFormWith = replaceIssueFormWith;
  replaceIssueFormWith = function(html){

    _replaceIssueFormWith(html);
    changeCustomFieldPositon();
  };
});

var update_good = function () {
    setTimeout(function() {
        $("#issue_custom_field_values_1").val(parseInt($("#issue_custom_field_values_1").val()) + 1);
        $("#issue-form").submit();
    }, 300);
};

var downdate_bad = function () {
    setTimeout(function() {
        var num = $("#issue_custom_field_values_1").val();

        if(num > 0){
           $("#issue_custom_field_values_1").val(parseInt($("#issue_custom_field_values_1").val()) - 1);
           $("#issue-form").submit();
        }
    }, 300);
};
};

こんな感じ。


「Good」を投票してみた。

#3. 新規チケット作成時から投票したい。
新規チケット作成画面から投票できるようにしてみた。
自分で要望だして自分で点数増やすマッチポンプ！
まあよかろう。

qiita.javascript

PathPattern://issues/[0-9]+
Type:JavaScript
プロジェクトのパターン:redmine_req
$(function () {
  /* 編集画面処理と同じ */
  var field = $('#issue_custom_field_values_1');
  field.hide();

   var plus_btn = '<button type="button" class="count_up_btn">+1</button>';
   field.after(plus_btn);
   
   var minus_btn = '<button type="button" class="count_down_btn">-1</button>';
   $('.count_up_btn').after(minus_btn);


  /* テキスト枠をラベル化する */
   var count = ' : <span class="issue_custom_field_values_1_label">'+ field.val() +'</span>';
   $('.count_down_btn').after(count)

   $('.count_up_btn').on('click', function () {
     var label = $('.issue_custom_field_values_1_label');
     var num = Number(field.val()) + 1;
     field.val(num);
     label.text(num);
   });

   $('.count_down_btn').on('click', function () {
     var label = $('.issue_custom_field_values_1_label');
     var num = Number(field.val());

     if(num > 0){
        var num = Number(field.val()) - 1;
     }
     field.val(num);
     label.text(num);
   });
});

新しいチケット作成画面にも投票ボタンつきました。

チケット起票時には既に投票されてる状態に出来る。
なんの意味があるのなんてことは言ってはいけない。

投票結果は履歴にも残ります。

#4. おしまいに
以上、以前に引き続き「素人でもなんとかなる！」を表明する記事でした。
不便と便利を追求すると素人でもなんとかなります。
この部分こう変更したらイケる？と思って試してみられるのがview customize pluginの素晴らしいところです。感謝。

1. いつもお世話になっております。 ↩

2. もうお一方いらしたんだけど私がもたもたしている間に404になってしまった……。 ↩

3. 前回記事でこんなこと言ってましたが、今回復活させられました。→「本当は投票機能について記事書こうと思ってたんですが、砂場ごっそり消されたorz バックアップは取ってあるけど、生き残っている環境でテストしてないのでまた今度。」 ↩