Redmineのチケット一覧画面でチケットのコメント数を表示する方法【view customize plugin】

Redmineのチケット一覧画面でチケットのコメント数を表示する方法【view customize plugin】

タイトル長くなりがち。

Redmineではチケットに対してコメントが追加できます。

こんな感じ↓

これをチケット一覧画面で、どのくらいの数のコメントがやり取りされているかを見たいです。

こんな感じ↓

確認した所、チケットのコメント情報の取得もAPIで実現でき、

表示部分もJSカスタマイズで出来そうだったので、

例によって view customize plugin の力を借りて実現します。

インストール手順はこちらをご覧下さい。

仕様

下記仕様で実装しました。

・システムによって追加された注記は数えない

・注記が0件の場合は吹き出しを表示しない

コード全体

実装したコードは下記の通りです。

const API_KEY = "ここには Redmine の APIキー を設定します";

$(document).ready(function() {
    // fontAwesome CSS を追加
    $('body').append("<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>");

    // チケット一覧のtd要素のチケットidを元に、APIでチケット情報を取得する。
    const tds = $("td.id");
    const resultPromises = [];
    $(tds).each(function(i, td) {
        const issueId = $(td).find("a").text();
        resultPromises.push(getIsuue(issueId));
    });

    // チケット情報全て取得完了後
    Promise.all(resultPromises).then(function(results) {
        // チケット毎のループ
        results.forEach(function(result) {
            const journals = result.issue.journals;
            const issueId = result.issue.id;
            const notesCount = getNotesCount(journals);
            // チケットに注釈が記載されていない場合、スキップ
            if (notesCount === 0) {
                return;
            }
            const tds = $("td.id");
            $(tds).each(function(i, td) {
                const rowIssueId = $(td).find("a").text();
                // 対象のチケットIDのtd以外の場合、スキップ
                if (issueId !== Number(rowIssueId)) {
                    return;
                }
                // 吹き出し設定
                $(td).append('<div><i class="fa fa-commenting-o" aria-hidden="true"></i>' + notesCount + '</div>');
            });
        });
    });
});

/**
 * チケットに書き込まれている注釈の数を返します。
 * @param journals 
 */
const getNotesCount = function(journals) {
    let count = 0;
    journals.forEach(function(journal) {
        if (journal.notes !== "") {
            count++;
        }
    });
    return count;
}

/**
 * 指定したidのチケット情報を取得します。
 * @param id 
 */
const getIsuue = function(id) {
    return new Promise(function(resolve, reject) {
        $.ajax({
            type: 'GET',
            url: '/issues/' + id + '.json?include=journals',
            headers: {
                'X-Redmine-API-Key': API_KEY
            },
            dataType: 'text',
            contentType: 'application/json',
        }).done(function(resp) {
            resolve(JSON.parse(resp));
        }).fail(function(jqXHR, textStatus, errorThrown){
            console.log(jqXHR);
            console.log(textStatus);
            console.log(errorThrown);
            reject(errorThrown);
        });
    });
}

解説など

チケットのコメント情報の取得

チケットのコメント情報の取得方法は若干つまりました。

一応リファレンスにもincludeパラメータ付けてね、と書いてあるのですが見落としてました・・・。

該当箇所

        $.ajax({
            type: 'GET',
            url: '/issues/' + id + '.json?include=journals',

 

全てのチケット情報取得完了を待つ

チケット情報の取得は非同期通信で行われるので、Promiseを使用します。

全てのチケット情報の取得が完了次第、Promise.all()で後続処理を実行しています。

該当箇所

    const resultPromises = [];
    $(tds).each(function(i, td) {
        const issueId = $(td).find("a").text();
        resultPromises.push(getIsuue(issueId));
    });

    // チケット情報全て取得完了後
    Promise.all(resultPromises).then(function(results) {

 

Promise + ループの書き方については、こちらも参考になるかしれません。

おわりに

作業しながら薄々「Redmineプラグインとして作ったほうがスマートかも」という気はしていました・・・。

Redmineカテゴリの最新記事