Redmine のセレクトボックスを Select2 と View Customize Plugin で強化する

対象

• Redmine : 3.3.1
• チケットの作成フォーム
• チケットの編集フォーム
• チケットのフィルタ条件のフォーム
• クライアント : Linux, Firefox 49

問題

セレクトボックスの選択肢が増えてくると、目的の選択肢を選ぶのが大変になる。

解決策

Select2 (https://select2.github.io/) と View Customize Plugin を使ってセレクトボックスを強化する。

プラグインのインストール

Redmine で Select2 を使えるようにしてくれるプラグインをインストールする。
下記の二つがある。

• Redmine base_select2 plugin (https://github.com/jbbarth/redmine_base_select2)
• Redmine Select2 Plugin (https://github.com/Undev/redmine__select2)

Redmine base_select2 plugin の方が同梱の Select2 のバージョンが新しくて 4.0.0 なので、こちらをインストールすることにする。

View Customize Plugin をインストールする。

• https://github.com/onozaty/redmine-view-customize

View Customize Plugin に設定する JavaScript

// /issues(/(\d+|new))?$

// フィルタ条件のフォーム用
(function() {
    var field;

    $(function() {
        $('#add_filter_select').change(function() {
            field = $(this).val();
        });
    });

    $(window).load(function() {
        $("#values_cf_1_1").select2({ width: '100%' });
        $("#values_cf_2_1").select2({ width: '100%' });

        $('#add_filter_select').change(function() {
            if (field === 'cf_1') {
                $("#values_cf_1_1").select2({ width: '100%' });
            } else if (field === 'cf_2') {
                $("#values_cf_2_1").select2({ width: '100%' });
            }
        });

        $('#filters-table').on('click', '#values_cf_1_1 ~ .toggle-multiselect', function() {
            $(this).siblings('select').select2({ width: '100%' });
        });
        $('#filters-table').on('click', '#values_cf_2_1 ~ .toggle-multiselect', function() {
            $(this).siblings('select').select2({ width: '100%' });
        });
    });
})();

// 作成、編集のフォーム用
$(function() {
    $("#issue_custom_field_values_1").select2({ width: '100%' });
    $("#issue_custom_field_values_2").select2({ width: '100%' });
});

適用した状態のスクリーンショット

以下はチケットの作成、編集のフォーム。

以下はチケットのフィルタのフォーム。

TODO

• 簡単に確認しただけなので気づいていない問題があるかも。
• チケット一括編集のページが未対応。